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

【问题标题】：How can i divide my html list into multiple columns while using flex?如何在使用 flex 时将我的 html 列表分成多个列？
【发布时间】：2019-01-25 18:32:34
【问题描述】：

我有一个表单的 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;
}

其次，我想更改我使用以下 sn-p 的列表元素的顺序：

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

【问题讨论】：

你能分享一下你的期望吗，比如列表应该如何显示？
jsfiddle.net/d6u802ty/1

标签： html css flexbox frontend

【解决方案1】：

首先 flex 不是 2d 如果你想拥有 2d 结构并控制它，去 css 网格。如果您选择 flex direction 作为 column 来回答您的问题，所有的 flex 项目都将放在一个 column 中，因此您需要找到一种方法来显示 2 个列和结构项目。如果你定义了orders，没有order的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>

希望这会有所帮助。

【讨论】：