Question

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

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

这适用于我的行，但我也想让它适用于我的列。

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

Answer 1

默认情况下，块级元素占用其包含块的整个宽度。实际上，这会解析为width: 100%，它会在水平方向上设置内容流的中断。

因此，flex项目默认情况下可以在行方向容器中包装。

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

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

（我猜可能在可用性研究的基础上，可能在可用性研究的基础上，确定Web应用程序可以垂直扩展，但不能水平扩展。）

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

使flex项包装在列方向容器中

1 个答案: