使弹性项目包裹在列方向容器中

Question

因此，要使用行布局将元素包装在 flex div 中，我所要做的就是：

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%，在水平方向设置内容流中断。

因此，弹性项目可以默认包装在行方向容器中。

但是，HTML 或 CSS 中没有设置块级元素的默认高度。高度由内容驱动 (height: auto)。

这意味着元素将垂直流动而不会中断。

（我猜想沿着进化路线的某个地方，可能是基于可用性研究，决定 Web 应用程序可以垂直扩展，但不能水平扩展。）

这就是 flexbox 不会自动按列方向换行的原因。它需要作者定义的高度作为断点。

然而，布局的高度通常是动态的，因此无法设置特定的高度。这使得 flexbox 无法用于在列方向包装项目。一个很好的选择是 CSS Grid Layout，它不需要在容器上设置高度：

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）
Edge - 截至 2017 年 10 月 16 日的全面支持（版本 16）
IE11 - 不支持当前规范；支持过时版本

完整图片如下：http://caniuse.com/#search=grid

使弹性项目包裹在列方向容器中

Make flex items wrap in a column-direction container

css

flexbox

word-wrap

css-grid