О порядке и направлении списка в CSS Flexbox

Question

Если вы перечислите список с помощью flex, это будет выглядеть примерно так.Есть ли способ сделать это?

14
25
36

Кстати, в случае увеличения до семи

15
26
37
4

Это как чувство.

.list_number {
  display: flex;
  flex-wrap: wrap;
}
.list_number > li {
  width: 50%
}

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Answer 1

Если вы открыты для подхода JavaScript, вы можете просто получить высоту элемента <li> (при условии, что все элементы <li> имеют одинаковую высоту), умножив его на половину числа <li>'s внутриваш элемент <ul> и установите высоту ul в это значение.( Если число <li>'s является нечетным числом , просто добавьте к значению высоту еще один <li>. )

Также убедитесь, что родительский гибкий контейнер .list_number имеет свойства flex-direction: column; и flex-wrap: wrap;, чтобы элементы автоматически переходили в следующий столбец, когда предыдущие элементы заполнили высоту.

---

Проверкаи запустите фрагмент кода ниже для практического примера того, что я описал выше:

/* JavaScript */
const div = document.querySelector(".list_number");
const lists = document.querySelectorAll(".list_number li");
const height = window.getComputedStyle(lists[0]).height;

div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

/* CSS */

html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}

.list_number{
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<!-- HTML -->

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Answer 2

Есть много способов добиться этого, но, как упоминалось в комментариях @TemaniAfif, самый простой способ сделать это - использовать такие столбцы:

ul{
    columns: 2;
 }

Просто добавьте это к вашему CSS, и вы сможете достичь того же самого с помощью всего одной строки кода.

Надеюсь, это поможет.

Answer 3

flex-direction: column и max-height должны добиться цели.