如何在使用 flex 时将我的 html 列表划分为多列?

Question

我有一个表单的html列表：

<ul id="cols">
<li class="nav-li"> list 1 </li>
<li class="nav-li"> list 2 </li>
<li class="nav-li"> list 3 </li>
<li class="nav-li"> list 4 </li>
<li class="nav-li"> list 5 </li>
<li class="nav-li"> list 6 </li>
<li class="nav-li"> list 7 </li>
<li class="nav-li"> list 8 </li>
<li class="nav-li"> list 9 </li>
</ul>

我希望将此列表分为我正在使用的 2 列：

#cols {
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
}

其次，我想更改使用以下代码片段的列表元素的顺序：

#cols {
display: flex;
flex-direction: column;
}
#cols li:first-child {
order: 4;
}
#cols li:nth-child(2) {
order: 5;
}
#cols li:nth-child(3) {
order: 3;
}
#cols li:nth-child(4) {
order: 2;
}

但是当我将两个 CSS 结合起来时，

即

#cols {
display: flex;
flex-direction: column;
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
}
#cols li:first-child {
order: 4;
}
#cols li:nth-child(2) {
order: 5;
}
#cols li:nth-child(3) {
order: 3;
}
#cols li:nth-child(4) {
order: 2;
}

将列表划分为 2 列属性将被删除！ 基本上弹性属性和列属性似乎矛盾！ 如何同时运行这两个条件，即拆分为列并重新排序列表元素？

http://jsfiddle.net/3jtfn2ad/39/

Answer 1

首先，如果你想拥有2D结构并控制它，flex不是2d，请选择css grid。 来回答您的问题，如果您选择 flex 方向作为列，所有 flex 项目都将放在一列中，因此您需要找到一种如何显示 2 列和结构项目的方法。 如果你正在定义订单，没有订单的 li(flex 项目(默认情况下将有 0。

#cols  {
display: flex;
flex-direction: row;
flex-wrap: wrap;

}
#cols .nav-li{
/* divide it into two column with equal width */
flex-basis: 50%
}
/* if you want the other items at last change the orders for all to last */
/*
#cols .nav-li{
order: 6;
}*/
#cols li:first-child{
order: 4;
}
#cols li:nth-child(2){
order: 5;
}
#cols li:nth-child(3){
order: 3;
}
#cols li:nth-child(4){
order: 2;
}

<ul id="cols">
<li class="nav-li"> list 1 </li>
<li class="nav-li"> list 2 </li>
<li class="nav-li"> list 3 </li>
<li class="nav-li"> list 4 </li>
<li class="nav-li"> list 5 </li>
<li class="nav-li"> list 6 </li>
<li class="nav-li"> list 7 </li>
<li class="nav-li"> list 8 </li>
<li class="nav-li"> list 9 </li>
</ul>

希望这有帮助。