'Two-column vertical-numbered lists with Flexbox

I'm sure this must be a duplicate, but I cannot find any related answers because so many people are referring to flexbox elements as "lists", when they're not actually using <ul> or <ol> HTML elements, and are making the equivalent of inline-block div elements.

I have an unordered list that I need to display as two columns using Flexbox. Based on today's reading, I have managed two columns, but the index order of the items goes from left-to-right, instead of top-to-bottom:

ol { display:flex; flex-wrap:wrap; flex-direction:row; }
ol li { flex:1 1 auto; width:40%; }
    
<ol>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
 <li>Item D</li>
 <li>Item E</li>
 <li>Item F</li>
 <li>Item G</li>
 <li>Item H</li>
</ol>

I need the output to be:

1. Item A          5. Item E
2. Item B          6. Item F
3. Item C          7. Item G ... etc

I tried to swap out flex-direction:row with column, but it just displayed a single list.

cssflexbox


Solution 1:[1]

I think you have to define a maximum height. You're current css lines are not defining "WHERE" the wrap should happen.

ol { display:flex; flex-wrap:wrap; flex-direction:row; max-height: 30px}
ol li { flex:1 1 auto; width:40%; }
    
<ol>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
 <li>Item D</li>
 <li>Item E</li>
 <li>Item F</li>
 <li>Item G</li>
 <li>Item H</li>
</ol>

Solution 2:[2]

You could also use columns (https://www.w3schools.com/css/css3_multiple_columns.asp). It can be pretty janky at times, but it works well for lists in my opinion.

ol {
  columns: 2
}
<ol>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
 <li>Item D</li>
 <li>Item E</li>
 <li>Item F</li>
 <li>Item G</li>
 <li>Item H</li>
</ol>

Solution 3:[3]

ol { 
   display:flex; 
   flex-wrap:wrap; 
   flex-direction:column; 
   height: 100px; 
}

no style for ol li

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Arthur Van Passel
Solution 3 Vikasdeep Singh

Related Questions