Question

我的目标是使用flexbox创建一个双列布局，其中第一列有两行，第二列有一行，如下所示：

enter image description here

在第三个项目上设置flex-basis: 100%会产生所需的效果，但仅当容器的flex-direction为row时才会生效：

enter image description here

将flex-direction更改为column会产生以下结果，除非明确设置height，这在我的项目中是不可行的：

enter image description here

如何在未明确设置容器height的情况下获取第一张图片？

Here's a Plunker illustrating the problem

body {
  display: flex;
  height: 100px;
  width: 100px;
}
.container {
  display: flex;
  flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */
  flex-grow: 1;
  flex-wrap: wrap;
  /* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/
}
.item {
  flex-grow: 1;
}
.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: green;
  flex-basis: 100%;
}

<div class="container">
  <div class="item one">&nbsp;</div>
  <div class="item two">&nbsp;</div>
  <div class="item three">&nbsp;</div>
</div>

Answer 1

为什么它不起作用：

Flex包装仅在Flex项目的初始主要大小溢出Flex容器时发生。在flex-direction: row的情况下，这是当它们的flex项比容器宽时。使用flex-direction: column时，它们必须溢出容器的高度。

但在CSS中，高度的表现与宽度有根本的不同。 CSS中容器的高度由其子项的高度决定。因此，如果没有某些东西约束容器的高度，它们的flex项将永远不会溢出;他们只是让他们的容器更高。如果它们没有溢出，它们就不会包裹。

可能的解决方案：

您必须约束容器的高度。显而易见的方法（你说的不在表格中）是设置明确的height或max-height。

问问自己为什么需要限制身高。它是否留在视口内？您可以使用viewport-relative单位并设置max-height: 100vh之类的内容。它是否等于此flex容器外的另一列的高度？您可以使用另一个Flexbox约束它。使此Flex容器成为外部Flexbox中的flex项。但是，外部弹性箱中的其他东西必须确定其高度。

Answer 2

尝试在更改方向（flex: none等）时为容器内的块设置@media。

我在Chrome和Firefox中测试过它。

Answer 3

据我所知，以下代码给出了您想要的结果：

body {
  display: flex;
  height: 100px;
  width: 100px;
}

.container {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  flex-grow:1;
}

.item {
  flex-basis:50%;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;

}

.three {
  background-color: green;
  flex-basis:100%;
}

除flex-basis:50%;之外，此代码与您在plunker中使用的代码相同。由于某些原因，plunker不支持flex-basis，另请参阅：

enter image description here

Answer 4

我认为你应该考虑使用网格系统来构建你的布局。在你的第一张照片上我们可以看到2个cols：第一个col是红色和蓝色框，第二个col是绿色框。

然后结构应该是这样的：

<div class="flex-container">
    <div class="col column">
        <div class="content red"></div>
        <div class="content blue"></div>
    </div>
    <div class="col">
        <div class="content green"></div>
    </div>
</div>

使用这些样式：

.flex-container {
   display:flex;
}
.col {
   flex:1;
   display:flex;
}
.column {
   flex-direction:column;
}
.content {
   flex:1;
}

以下是使用您的演示目标的快速代码：https://jsfiddle.net/wyyLvymL/ 希望能帮助到你！（如果你需要了解它是如何工作的，请ping我）

当flex-direction为'column'时，CSS flex-basis无法正常工作

4 个答案: