如何在css（或flexbox）中创建行和列？

Question

有没有办法在flexbox或css中使用行和列对齐响应式div，如下所示：

由于订购（以及移动断点），我不能简单地使用列，并且由于轻微的偏移，行不会真正起作用。

应注意，在为移动设备调整大小时，它应根据编号顺序堆叠在顶部。

感谢任何和所有帮助。

Answer 1

您可以将元素包装在列中，也可以在移动设备上使用display: contents。但是，它尚未获得广泛支持。

#wrapper {
  display: flex;
  height: 400px;
}
.column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.item {
  background: #66D8A4;
  margin: 1em;
  padding: 1em;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.column:first-child > :last-child, .column:last-child > :first-child {
  flex-grow: 2;
}
@media (max-width: 800px) {
  #wrapper {
    flex-direction: column;
  }
  .column {
    display: contents;
  }
}

<div id="wrapper">
  <div class="column">
    <div class="item" style="order:1">1</div>
    <div class="item" style="order:4">4</div>
  </div>
  <div class="column">
    <div class="item" style="order:2">2</div>
  </div>
  <div class="column">
    <div class="item" style="order:3">3</div>
    <div class="item" style="order:5">5</div>
  </div>
</div>

另一种方法是不使用列的包装器，并使用break-*属性强制列中断。我在this other answer中解释了这种技巧。但是，似乎没有浏览器支持这一点。

Answer 2

您可以使用flexbox创建3列。然后将其他面板嵌套在这些列中。

您可能无法在纯CSS中执行此操作，并且必须使用某种形式的JavaScript库（类似https://golden-layout.com）

Answer 3

这不是Flexbox专为此设计的用例。即将推出的CSS网格布局规范是为这样的二维布局而设计的。

在浏览器出现之前，您可能会更好地查看旧方法来实现此目的。 Susy Grid值得一看这种事情，我一直在测试网格布局示例，作为人们想要用CSS中的网格做的事情的一个例子。

Answer 4

我最好的解决方案是使用mansory插件http://masonry.desandro.com/来布局你的div并使用插件模块指定断点，但是因为你更喜欢flexbox style css，这个链接可能会更加清楚http://learnlayout.com/flexbox.html < / p>