html - 如何在使用 flex 时将我的 html 列表分成多列？

Question

I have a html list of the form:

<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 列的属性!基本上flex属性和column属性好像是矛盾的!我如何同时运行这两个条件，即拆分为列并重新排序列表元素？

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

Answer 1

首先，如果您想拥有 2d 结构并控制它，flex 不是 2d，请选择 css 网格。如果您选择 flex direction 作为 column 来回答您的问题，所有 flex 元素将在一列中，因此您需要找到一种方法来显示 2 列和结构元素。如果您正在定义订单，则默认情况下没有订单的 li(flex items) 将具有 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>

希望这对您有所帮助。