15

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%;
  }
}

6 Answers 6

13

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!

6

You need to give the flex container a defined height.

Without a fixed height on the container, the items don't know where to wrap.

You also need to add flex-wrap: wrap, as the initial setting on a flex container is nowrap.

0
4

For the list to span multiple columns:

  1. You must specify a defined height.

  2. Set it to wrap by using flex-wrap: wrap (by default it is set to nowrap)

See demo below:

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50px;
}
li {
  width: 25%;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

2

First you need to set height on flex-container and also flex-wrap: wrap. Next you can set flex-basis: 50% on flex-item and that will give desired result.

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}
li {
  flex-basis: 50%;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

1

Use flex-wrap:wrap; on the ul. You dont need to set height to one value strictly but it's height should not be able to contain more than 2 at a time but should be able to contain 2.

li{
  width:50px;
  list-style-type:none;
  height:50px;
  margin:5px;
  background-color:green;
  color:white;
}
ul{
  height:150px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

1

If you don't know the height of each item or how many items you will have, a more flexible solution is this:

ul {
  column-count: 4
}
li {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

You may also need to adjust margin-top of li:first-child if they don't align to the top.

3
  • Don't copy/paste the same answer all over, post at one place and then vote to close on the other ... Is it ok to copy/paste myself?
    – Asons
    Oct 1, 2018 at 18:13
  • Furthermore, if you do think you know a solution that will provide the flow asked for, provide a working code snippet instead of only a CSS fragment.
    – Asons
    Oct 1, 2018 at 18:17
  • I'll try to take your rebukes and downvotes to heart. In my defense, I had just spent too much time looking at SO pages about flex, when what I needed was column-count, and I was trying to help others to have a better experience.
    – Marcus
    Oct 2, 2018 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.