При центрировании по горизонтали li обрезают

Question

Я пытаюсь макет li's с помощью flexbox, У меня есть их в столбце, с 3 li's в каждом столбце. Проблема в том, когда я хочу ul по центру.

Я центрирую ul с помощью align-content: center, Когда я делаю это, и больше li's чем страница может показать (переполнена), li's в начале отрезать. (Те, что на левой стороне, обрезаются, но те, что на правой стороне, отображаются нормально.)

Я не буду иметь конкретное количество li's может варьироваться от 4 до 50. Поэтому я не могу удалить align-content: center потому что, когда у меня есть небольшое количество li's (скажем 4), результаты не то, что я хочу.

Как я могу центрировать ul не отрезав его?

JSFiddle

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    flex-direction: column;
    width: 100%;
    height: 70%;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    list-style-type: none;
    width: 200px;
}

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
    </ul>
</div>

Answer 1

Как я могу отцентрировать ul, не отрезав его?

Это был действительно хороший вопрос, возникли проблемы с поиском способа добиться такого поведения.

Я не верю, что вы найдете чистый CSS решение, однако мы можем сделать это, используя немного javascript,

По сути, я создал скрипт, прикрепленный к событию изменения размера окна, который будет делать следующее:

1. проверьте, сколько элементов у нас внутри нашего элемента-обёртки: #wrapper
2. разделите количество элементов на 3 (так как у нас есть 3 элемента в каждом столбце), чтобы узнать, сколько столбцов потребуется для отображения элементов
3. присвойте ширине элементу обертки следующую формулу: количество столбцов * ширина каждого элемента (в нашем случае это 200px)

Делая это, мы форсируем переполнение в родительском элементе, и полоса прокрутки будет иметь нормальное поведение, показывая каждый элемент.

Полный код доступен в jsfiddle,

Проверьте следующий пример:

function onResize() {

  var wrapper = document.querySelector('#wrapper');

  var items = wrapper.querySelectorAll('li');

  var columns = Math.ceil(items.length / 3);

  var width = 200 * columns;

  wrapper.style.width = width > window.innerWidth ? width + 'px' : '100%';

}

onResize();

window.addEventListener('resize', onResize);

html,
body {
  height: 100%;
  text-align: center;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#wrapper {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}
ul {
  height: 75%;
  list-style: none;
  display: flex;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
li {
  flex-basis: calc(100% / 3 - 2px);
  color: firebrick;
  border: 1px solid firebrick;
  background-color: greenYellow;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="wrapper">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

Answer 2

Удалить align-content и использовать margin-left:20%; margin-right:auto;

Answer 3

Здесь safeключевое слово для центрирования и сохранения на экране. В настоящее время он поддерживается только в Firefox:

ul {
  align-content: safe center;
}

Answer 4

В итоге я дал родительскому элементу набор min-width который покрывает все содержимое.