当 flex-direction 为“列”时，CSS flex-basis 不起作用答案

【问题标题】：CSS flex-basis not working when flex-direction is 'column'当 flex-direction 为“列”时，CSS flex-basis 不起作用
【发布时间】：2013-12-06 19:55:21
【问题描述】：

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

在第三个项目上设置flex-basis: 100% 可以达到预期的效果，但前提是容器的flex-direction 是row：

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

如何在不明确设置容器的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>

【问题讨论】：

为什么不嵌套读取和蓝色块？然后给你的外部网格一个水平方向和内部网格垂直。这是更多的标记，但会起作用：P
列方向需要一个明确的高度，以便像包装元素一样遵循 flex-basis 值。
@cimmanon 谢谢。出于好奇，为什么当网格是行优先时不是这种情况？我在规范中找不到任何相关内容。
我不知道为什么会这样（是的，我希望不需要高度）。如果你在 Flexbox 外面看一会儿，如果内容要强制滚动，所有元素都更喜欢垂直增长而不是水平增长。在某种程度上，块元素确实有明确的宽度，即使它设置为 auto（父元素的宽度）。另一方面，高度由设置为 auto 时元素的内容决定。
有趣的是，您的 Plunker 示例在 Firefox 32（Win 7）中“按原样”适用于我。也许这只是 Chrom(e|ium) 错误？

标签： html css flexbox

【解决方案1】：

为什么它不起作用：

仅当 flex 项的 初始主尺寸 溢出 flex 容器时才会发生 Flex wrap。在flex-direction: row 的情况下，这是它们伸缩项目比容器宽的时候。使用flex-direction: column，它们必须溢出容器的高度。

但在 CSS 中，高度的行为与宽度根本不同。 CSS 中容器的高度由其子项的高度决定。因此，如果没有 something 约束容器的高度，它们的弹性项目将永远不会溢出；他们只是让他们的容器更高。如果它们不溢出，它们就不会换行。

可能的解决方案：

您必须限制容器的高度。显而易见的方法（你说的不可行）是设置一个明确的height 或max-height。

问问自己为什么需要限制高度。是停留在视口内吗？您可以使用viewport-relative 单位并设置类似max-height: 100vh 的内容。是否等于此 flex 容器外另一列的高度？你也许可以用另一个 flexbox 来约束它。使这个 flex 容器成为外部 flexbox 中的 flex 项。不过，外部 flexbox 中的其他东西必须确定它的高度。

【讨论】：

【解决方案2】：

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

我在 Chrome 和 Firefox 中测试过。

【讨论】：

【解决方案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，另请参阅：

【讨论】：

OP 想要做到这一点没有设置明确的高度，这是不可能的（至少，没有嵌套）。
是的，我同意嵌套似乎是一种解决方案。你认为设置flex-basis 是一个明确的高度吗？还是指身体的高度？
弹性容器的高度。 flex-basis 不是一个明确的高度，它是跨主轴的建议测量值。
好吧，但是我不明白为什么 OP 在他的示例代码中设置高度或将他的问题称为“当 flex-direction 为 'column' 时 CSS flex-basis not working” 代码适用于 FF（无高度）但不适用于 chrome，请参阅codepen.io/anon/pen/Ezanf
我知道这可能很难想象，但在提出问题时，它没有起作用（请注意，这个问题已经有将近一年的历史了。当时，Firefox 仍然只支持最初的 Flexbox 属性）。

【解决方案4】：

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

然后结构应该是这样的：

<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/ 希望能帮助到你！（如果您需要了解它是如何工作的，请联系我）

【讨论】：