Колонки Flexbox в порядке возрастания

У меня была аналогичная проблема. В моем случае проблема возникла из-за неправильного владельца / разрешения. Мне просто пришлось сменить владельца в моем каталоге данных на пользователя mysql, и это решило проблему.

1
задан kukkuz 18 March 2019 в 16:06
поделиться

3 ответа

Используйте флексбокс для колонок и установите высоту для ul - см. Демонстрацию ниже:

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  max-width: 150px;
  height: 8em;
}

li {
  margin: 5px;
}
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>
[116 ]

Или вы можете использовать CSS-столбцы - см. Демонстрацию ниже:

ul {
  list-style: none;
  columns: 2; /* added this */
  width: 100%;
  max-width: 150px;
  height: 8em;
}

li {
  margin: 5px;
}
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>
[1117 ]

0
ответ дан kukkuz 18 March 2019 в 16:06
поделиться

Вы можете попытаться добавить высоту / максимальную высоту и изменить направление на столбец или использовать правило столбца:

ul {
  list-style:none;
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  width: 100%;
  max-width: 150px;
  max-height: 130px;
}

или:

ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
0
ответ дан Alessio 18 March 2019 в 16:06
поделиться

Я предполагаю, что вы используете flexbox, чтобы контейнер расширялся по ширине, чтобы содержать как можно больше элементов по горизонтали; в этом случае flex-direction:column не будет работать. Вы можете проверить https://www.w3schools.com/css/css3_multiple_columns.asp

Поддержка скудна, но это единственное, что может делать то, что вы хотите (вот почему необходимо ввести): https://caniuse.com/#search=column

0
ответ дан Dinu 18 March 2019 в 16:06
поделиться