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>

我希望将此列表分为两列，我正在使用这些列：

#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>

希望这会有所帮助。

使用Flex时，如何将html列表分成多列？

1 个答案: