css - 带有 Flexbox 的两列垂直编号列表

Question

我确定这一定是重复的，但我找不到任何相关的答案，因为很多人将 flexbox 元素称为“列表”，而实际上他们并没有使用 <ul>。或 <ol> HTML 元素，并且正在制作等同于内联 block div 元素。

我有一个无序列表，我需要使用 Flexbox 将其显示为两列。根据今天的阅读，我管理了两列，但元素的索引顺序是从左到右，而不是从上到下:

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>

我需要的输出是:

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

我试图换出 flex-direction:row与 column , 但它只显示一个列表。

Answer 1

我认为您必须定义最大高度。你当前的 css 行没有定义换行应该发生的“WHERE”。

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>