当flex-direction为'column'时，CSS flex-basis不工作 [英] CSS flex-basis not working when flex-direction is 'column'

问题描述

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

设置 flex -basis：100％在第三个项目给出了所需的效果，但只有当容器的 flex-direction 是 row ：

$ 到列除非显式设置 height ，这在我的项目中是不可行的：

如何获取第一张图片明确设置容器的 height ？

这是一个描述问题的Plunker 。

  body {display：flex; height：100px; width：100px;}。container {display：flex; flex-direction：column; / *将此设置为`row`会产生预期的效果，但是旋转* / flex-grow：1; flex-wrap：wrap; / * height：100％; * / / *设置这个问题，但是对于我的项目* /}。item {flex-grow：1;}是一个{background-color：red;}两个{background-color：blue;}是不可行的。三个{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>  

>

解决方案

为什么不起作用：

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

根本不同于宽度。 CSS中容器的高度由其子项的高度决定。因此，没有 约束容器的高度，它们flex项目永远不会溢出;他们只是使他们的容器更高。

：

$ b

您必须约束容器的高度。明显的方式（你说的是离开表），是设置一个显式的 height 或 max-height 。 / p>

问自己为什么需要约束高度。它是留在视口内吗？您可以使用视口相对单位，并设置 max-height：100vh 。它等于这个flex容器外的另一列的高度吗？你可以使用另一个flexbox来限制它。使此Flex容器成为外部flexbox中的flex项。但是，外部flexbox中的其他东西，不得不建立它的高度。

My goal is to create a two-column layout with flexbox wherein the first column has two rows and the second column has one, like this:

Setting flex-basis: 100% on the third item gives the desired effect, but only when the container's flex-direction is row:

Changing flex-direction to column results in the following, unless the height is set explicitly, which is infeasible in my project:

How can I get the first image without explicitly setting the height of the container?

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>

解决方案

Why it doesn't work:

Flex wrap only happens when the initial main size of the flex items overflows the flex container. In the case of flex-direction: row, this is when they flex items are wider than the container. With flex-direction: column, they must overflow the height of the container.

But in CSS, height behaves fundamentally differently than width. The height of a container in CSS is determined by the height of its children. Thus, without something constraining the container’s height, they flex items will never overflow; they just make their container taller. If they don’t overflow, they won’t wrap.

Possible solutions:

You have to constrain the height of the container. The obvious way (which you said is off the table), is setting an explicit height or max-height.

Ask yourself why you need to constrain the height. Is it to stay within the viewport? You could use viewport-relative units and set something like max-height: 100vh. Is it to equal the height of another column outside this flex container? You might be able to constrain it with another flexbox. Make this flex container a flex item in an outer flexbox. Something else in that outer flexbox would have to establish its height, though.

这篇关于当flex-direction为'column'时，CSS flex-basis不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！