Flex items not wrapping in a column direction container

Question

I'd like to use flex-direction:column for a specific layout.

I usually use standard flex-direction:row, so I've got some problems using column. I don't know too much how to control it and didn't find anything useful on google.

I've got a regular UL list and what I want is this:

1 3 5 7

2 4 6

What I currently get is this:

1
2
3
4
5
6
7

My current simplified code is this:

.ul{
  display: flex;
  flex-direction: column;

  li{
    width: 25%;
  }
}

Answer 1

Apply total height on ul and make it wrap.

Then apply flex-basis on ul li (which is height because we've applied flex-direction: column) to 50%. Like:

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

Have a look at the snippet below:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%;
}

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

Hope this helps!