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

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

1 голос
/ 18 марта 2019

Я работаю с некоторыми элементами в списке: 

<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>

и пытаюсь разбить их на два столбца с помощью flexbox, что дает следующий результат: 

+--------------------+
|                    |
| Item1       Item2  |
|                    |
| Item3       Item4  |
|                    |
| Item5       Item6  |
|                    |
| Item7       Item8  |
|                    |
+--------------------+

Но я пытаюсь отсортировать их в порядке возрастания, чтобы это выглядело так: 

+--------------------+
|                    |
| Item1       Item5  |
|                    |
| Item2       Item6  |
|                    |
| Item3       Item7  |
|                    |
| Item4       Item8  |
|                    |
+--------------------+

Не уверен, как этого добиться с помощью CSS + Flexbox, если мне не нужно добавить несколько JS вмикс?

Вот демонстрация на Codepen:

https://codepen.io/ultraloveninja/pen/drKLzG

Ответы [ 3 ]

4 голосов
/ 18 марта 2019

Используйте столбец flexbox и установите высоту для 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>

Или вы можете использовать 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>
1 голос
/ 18 марта 2019

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

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 голосов
/ 18 марта 2019

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

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

...