Когда вы центрируете по горизонтали, li обрезают

Я пытаюсь выполнить макет 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>

Ответы

Ответ 1

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

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

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

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

  • проверьте, сколько элементов у нас внутри нашего элемента-оболочки: #wrapper
  • разделите количество элементов на 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>

Ответ 2

удалить выравнивание содержимого и использовать margin-left:20%; margin-right:auto;

Ответ 3

Я пришел из-за https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties статьи. Я рассматривал эту проблему, и это "обходное решение" могло бы помочь в случае, если 3 элементам стека разрешено обернуть:

http://codepen.io/anon/pen/pyOXVo

Я уверен, что это не самое лучшее, но это не требует JS. Я включил те группы из трёх тегов li в свои теги ul, чтобы их можно было рассматривать как "строки", хотя внутренние элементы рассматриваются как столбцы. Кажется, что он соответствует требованиям OP, поскольку они поддерживают центрированное выравнивание с 6 элементами вместо 30.