将flex项目包裹在列方向容器中

Question

so，要使用我要做的所有行为将元素包装在flexdiv中，这就是：

div {
  display: flex;
  flex-direction: row;  /* I want to change this to column */
  flex-wrap: wrap;      /* wrap doesn't seem to work on column, only row */
}

<div>
  <p>these</p>
  <p>will</p>
  <p>wrap</p>
</div>

这适用于我的行，但我也想使其适用于我的列。

我尝试将flex-direction更改为column，但似乎无法正常工作。有人知道如何获得此功能吗？

Answer 1

块级元素默认情况下，占用其包含块的全宽度。实际上，这解决了width: 100%，它在水平方向上设置了内容流的突破。

因此，Flex项目默认情况下可以包装在划分容器中。

但是，HTML或CSS中的任何内容都不在块级元素上设置默认高度。高度是内容驱动的(height: auto(。

这意味着元素将垂直流动而没有任何理由破裂。

(我猜沿进化线的某个地方，可能是在可用性研究的基础上，因此，Web应用程序可以垂直扩展，但不能水平扩展。(

(

这就是为什么FlexBox不会自动在列方向上包装项目的原因。它需要作者定义的高度才能充当断裂点。

---

通常，布局的高度是动态的，因此无法设置特定的高度。这使得flexbox无法用来将项目包装在列方向上。一个不错的选择是CSS网格布局，它不需要容器上的高度设置：

div {
  display: grid;
  grid-gap: 10px;
}
p:nth-child(3n + 1) {
  grid-row: 1;
  background-color: aqua;
}
p:nth-child(3n + 2) {
  grid-row: 2;
  background-color: orange;
}
p:nth-child(3n + 3) {
  grid-row: 3;
  background-color: lightgreen;
}
p {
  margin: 0;
  padding: 10px;
}

<div>
  <p>ONE</p>
  <p>TWO</p>
  <p>THREE</p>
  <p>FOUR</p>
  <p>FIVE</p>
  <p>SIX</p>
  <p>SEVEN</p>
  <p>EIGHT</p>
  <p>NINE</p>
</div>

浏览器支持CSS网格

• Chrome-截至2017年3月8日(版本57(
的全力支持
• Firefox-截至2017年3月6日(版本52(
的全力支持
• Safari-截至2017年3月26日(版本10.1(的全力支持
• 边缘 - 截至2017年10月16日(版本16(
的全力支持
• IE11-不支持当前规格；支持过时的版本

这是完整的图片：http：//caniuse.com/#search=grid