Question

我确定这必须是重复的，但是我找不到任何相关的答案，因为当很多人实际上没有使用<ul>或{{1时，他们将flexbox元素称为“列表” }} HTML元素，并且等效于内联块div元素。

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

<ol>

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，但它只显示了一个列表。

Answer 1

我认为您必须定义最大高度。您当前的css行没有定义应在何处进行换行。

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>

Answer 2

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

ol li的风格

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

2 个答案: