使用 Flexbox 的两列垂直编号列表答案

【问题标题】：Two-column vertical-numbered lists with Flexbox使用 Flexbox 的两列垂直编号列表
【发布时间】：2022-04-26 16:48:33
【问题描述】：

我确定这一定是重复的，但我找不到任何相关的答案，因为很多人将 flexbox 元素称为“列表”，而实际上他们并没有使用 <ul> 或 <ol> HTML 元素，并且正在制作等效于 inline-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，但它只显示了一个列表。

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

您也可以使用列 (https://www.w3schools.com/css/css3_multiple_columns.asp)。有时它可能很笨拙，但我认为它适用于列表。

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>

【讨论】：

【解决方案3】：

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

ol li 没有样式

【讨论】：