Flexbox：当项目增加超过 4 时分成 2 列 [关闭]

Question

我有多个项目列表，当列表中的项目超过 4 个时，我需要将它分成第二列，但我不太清楚如何。我需要流/顺序保持在列流中。

这是我尝试使用 flexbox 实现的目标，但事实证明它比我确信的要困难得多。如果可以解决我的问题，我愿意使用 css 网格或其他任何东西：

这就是我想要达到的目标：

Answer 1

您可以使用带有flex-direction: column; 和flex-wrap: wrap; 属性的弹性框。主 div 应该有一个固定的高度，以便 flex 将它包裹起来并创建多个列。

#main {
  width: 400px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: start;
}

#main span {
  width: 100px;
  height: 100px;
  
}

<div id="main">
  <span style="background-color:coral;">A</span>
  <span style="background-color:lightblue;">B</span>
  <span style="background-color:khaki;">C</span>
  <span style="background-color:pink;">D</span>
  <span style="background-color:lightgrey;">E</span>
  <span style="background-color:lightgreen;">F</span>
</div>

Answer 2

这就是你正在尝试的，对。将此样式添加到ul

ul {
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
    }

This document explains all in detail

我们也有一个插件来完成这项工作Check this

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
   
</ul>