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

Question

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

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

更改flex-direction为column以下结果,除非height明确设置,这在我的项目中是不可行的:

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

这是一个说明问题的Plunker.

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-direction: column,它们必须溢出容器的高度.

但在CSS中,高度的表现与宽度基本不同.CSS中容器的高度由其子项的高度决定.因此,如果没有限制容器高度的东西,它们的柔性物品永远不会溢出; 他们只是让他们的容器更高.如果它们没有溢出,它们将不会包裹.

可能的方法:

您必须约束容器的高度.显而易见的方式(你说的不在桌面上),是设置一个明确的height或max-height.

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

Answer 2

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

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，另请参阅：