Flex 项目未包装在列方向容器中答案

【问题标题】：Flex items not wrapping in a column direction containerFlex 项目未包装在列方向容器中
【发布时间】：2018-09-27 16:29:39
【问题描述】：

我想将flex-direction:column 用于特定布局。

我通常使用标准的flex-direction:row，所以我在使用column 时遇到了一些问题。我不太了解如何控制它，也没有在google上找到任何有用的东西。

我有一个常规的UL 列表，我想要的是：

1 3 5 7

2 4 6

我目前得到的是这样的：

我目前的简化代码是这样的：

.ul{
  display: flex;
  flex-direction: column;

  li{
    width: 25%;
  }
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

在ul 上应用总height 并使其成为wrap。

然后将flex-basis 应用于ul li（这是高度，因为我们已应用flex-direction: column）至50%。喜欢：

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

看看下面的sn-p：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

希望这会有所帮助！

【讨论】：

【解决方案2】：

你需要给弹性容器一个定义的高度。

容器没有固定高度，物品不知道在哪里包装。

您还需要添加flex-wrap: wrap，因为弹性容器上的初始设置是nowrap。

【讨论】：

【解决方案3】：

对于跨越多列的列表：

您必须指定一个定义的高度。
使用flex-wrap: wrap将其设置为换行（默认设置为nowrap）

请看下面的演示：

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50px;
}
li {
  width: 25%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

【讨论】：

【解决方案4】：

首先您需要在flex-container 和flex-wrap: wrap 上设置高度。接下来，您可以在flex-item 上设置flex-basis: 50%，这将产生所需的结果。

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}
li {
  flex-basis: 50%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

【讨论】：

【解决方案5】：

在ul 上使用flex-wrap:wrap;。您不需要严格将高度设置为一个值，但它的高度一次不能包含超过 2 个，但应该能够包含 2 个。

li{
  width:50px;
  list-style-type:none;
  height:50px;
  margin:5px;
  background-color:green;
  color:white;
}
ul{
  height:150px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

【讨论】：

【解决方案6】：

如果您不知道每个物品的高度或您将拥有多少物品，一个更灵活的解决方案是：

ul {
  column-count: 4
}
li {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

如果margin-top 和li:first-child 未与顶部对齐，您可能还需要调整它们。

【讨论】：

不要复制/粘贴相同的答案，在一个地方发布，然后在另一个地方投票关闭...Is it ok to copy/paste myself?
此外，如果您确实认为自己知道可以提供所需流程的解决方案，请提供工作代码 sn-p 而不仅仅是 CSS 片段。
我会尽量把你的指责和反对意见放在心上。在我的辩护中，我刚刚花了太多时间查看有关 flex 的 SO 页面，而我需要的是列数，并且我试图帮助其他人获得更好的体验。