Flex items do not wrap in a column direction container

Question

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

I usually use standard flex-direction:row , so I am having trouble using column . I don’t know too much how to control it, and did not find anything useful on Google.

I have a regular UL list and I want:

 1 3 5 7 2 4 6 

I am currently getting the following:

 1 2 3 4 5 6 7 

My current simplified code:

 .ul{ display: flex; flex-direction: column; li{ width: 25%; } } 

Answer 1

Apply a general height to ul and make it wrap .

Then apply flex-basis on ul li (this is the height because we applied flex-direction: column ) to 50%. How:

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

Take 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!

Answer 2

You must provide the flex container with a specific height.

Without a fixed height on the container, the elements do not know where to wrap them.

You also need to add flex-wrap: wrap , since the initial setup in the flex container is nowrap .

Answer 3

First you need to set the height on flex-container as well as flex-wrap: wrap . Then you can set flex-basis: 50% to flex-item , and this will give the 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> 

Answer 4

The list uses several columns:

• You must specify a specific height.

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

See the 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> 

Answer 5

Use flex-wrap:wrap; in ul . You do not need to strictly set the height to one value, but the height should not contain more than 2 pieces, but should 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>