您可以将嵌套列flexbox设置为尽可能小但尽可能宽

Question

在下面的代码片段中，我有两个flexbox容器：一个主要的包装行，另一个嵌套在第一个容器中，具有列方向。

我想要红色，绿色和绿色;蓝色容器显示如下：

--------------
red   | black
--------------
green | gray
--------------
blue  | 
--------------

而不是像这样堆叠：

--------
red
--------
green
--------
blue
--------
black
--------
gray
--------

这是一种可能的行为吗？谢谢！

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-element {
  flex: 1 1 auto;
}

.flexbox-column {
  flex-direction: column;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element flexbox-column" style="flex: 1 1 100%">
    <div class="flexbox-element red"></div>
    <div class="flexbox-element green"></div>
    <div class="flexbox-element blue"></div>
    <div class="flexbox-element black"></div>
    <div class="flexbox-element gray"></div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>

Answer 1

如果您将flex-direction: column和flex: 1移至第一组，则应该得到您想要的内容。

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-column {
  flex-direction: column;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

.flexbox-group {
  width: 400px;
  height: 600px;
  flex-direction: column;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element flexbox-group">
    <div class="flexbox-element red"></div>
    <div class="flexbox-element green"></div>
    <div class="flexbox-element blue"></div>
    <div class="flexbox-element black"></div>
    <div class="flexbox-element gray"></div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>

Answer 2

1. CSS3 Multicolumns解决方案
2. CSS3网格布局解决方案

由于Flexbox在方向为列时的限制（您需要以某种方式限制高度，否则它不会包装在第二列中），对于 CSS3 Multicolumns来说，这是一项更简单的工作/强>：

.col-2 {
  columns: 2;
}

＆＃13;
＆＃13;
.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-element {
  flex: 1 1 auto;
}

.col-2 {
  columns: 2;
  width: 100%;
  outline: 1px dashed blue;
}

.col-2 > * {
  width: 50%;
  min-height: 200px;
  outline: 1px dotted red;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}
＆＃13;
<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element col-2" style="flex: 1 1 100%">
    <div class="red">A</div>
    <div class="green">B</div>
    <div class="blue">C</div>
    <div class="black">D</div>
    <div class="gray">E</div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

您也可以使用 CSS3网格布局，但您需要手动定位IE10-11和Edge 12-15中的每个网格项目（当前Edge 16支持与其他网格项目相同的新建议）现代浏览器）

网格布局（compat Edge 16+和其他现代浏览器.IE11需要明确定位每个网格项的行和列）

➡️https://codepen.io/PhilippeVay/pen/GdBpJa?editors=0100

.col-2 {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns with strict equal width */
}

.col-2 > :nth-child(odd) {
  grid-column: 1; /* even items can now only occupy the 2nd column */
}