Как сделать 3 колонки на flex-box?

Question

[drtvader]

Привет!
Есть код:

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
</ul>

Как на flex сделать, что бы li выстраивались в 3 колонки?
Что бы получилось:
в первой колонке: 1, 2;
во второй: 3, 4;
в третьей: 5
Возможно ли такое?

Answer 1

[Антон Федорян]

https://jsfiddle.net/slippyk/oqd7tafu/

Answer 2

[ArturArturov]

можно попробовать так:

ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 300px;
  padding: 0;
}
li{
  width: 33%;
  height: 100px;
  background: red;
  background-clip: content-box;
  padding: 10px;
  list-style: none;
}

Comments

[Максим Васильев]

flex-direction: column ?