Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

Two-column vertical-numbered lists with Flexbox

$
0
0

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 E2. Item B          6. Item F3. Item C          7. Item G ... etc

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


Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>