Возможно ли разбить ul li на 2 колонки flex?

Question

[WebforSelf]

<ul class="col2">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
<li>Пункт 6</li>
<li>Пункт 7</li>
<li>Пункт 8</li>
</ul>

Имеем такой список, как сделать чтоб он шел в 2 колонки на flex

C float к примеру понятно, а вот с flex что то не выходит.

Comments

[Максим Анциферов]

Есть такой вариант

.col2 {
  display: flex;
  flex-wrap: wrap;
}

.col2 > * {
  width: 50%;
}

[iBird Rose]

Максим Анциферов, ну вот нафига ты туда * поставил? даже если забить на тот момент, что внутри ul всегда будет только li и ничего другое - нельзя использовать * в таких ситуациях.

[WebforSelf]

iBird Rose, как вариант , решил использовать
column-count:2;

[Максим Анциферов]

iBird Rose, а есть уверенность, что всегда будет использоваться ul? И что не так с *?

[Ankhena]

Максим Анциферов,

а есть уверенность, что всегда будет использоваться ul? И что не так с *?

Медленная.

И для этого придумали классы, чтобы не думать li там или div'ы

[Ankhena]

@WebforSelf

Возможно ли разбить ul li на 2 колонки flex?

Можно:
1. Пункты будут выстраиваться сначала по горизонтали, а потом по вертикали.
Для этого нужно задать каждому элементу ширину 50% или меньше, если нужны отступы.
2. Если нужно чтобы элементы сначала выстраивались по вертикали, а потом по горизонтали, то нужно задавать высоту флекс-контейнеру. А это идея не очень.

Поэтому, для второго варианта разумнее использовать либо columns либо гриды.

Answer 1

[Николай Миронов]

Если вы знаете количество элементов и можете задать высоту для UL, то флексом решается очень просто

.col2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 600px;
  height: 300px;
}

.col2 li { 
  height: 25%;
  width: 50%;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
}