html – 当flex-direction为’column’时,CSS flex-basis不起作用

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

设置灵活基础：第三个项目的100％给出了所需的效果,但只有当容器的弹性方向为行时：

将flex-direction更改为列会导致以下内容,除非高度被明确设置,这在我的项目中是不可行的：

如何获取第一个图像而不显式设置容器的高度？

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>

解决方法

为什么它不起作用

Flex包装只有当Flex项目的初始主要大小溢出了Flex容器时才会发生.在flex-direction：row的情况下,这是当它们的flex项目比容器宽.使用flex-direction：column,它们必须溢出容器的高度.

但是在CSS中,高度与宽度基本不同. CSS中的容器的高度由其孩子的高度确定.因此,没有限制容器高度的东西,它们的挠曲物品永远不会溢出;他们只是使他们的容器更高.如果不溢出,就不会包装.

可能的解决方案：

你必须约束容器的高度.显而易见的方式(你说的是桌子),设置一个显式的高度或最大高度.

问问自己为什么需要约束高度.是否留在视口内？您可以使用viewport-relative单位,并设置像max-height：100vh.是否等于此Flex容器外的另一列的高度？您可能可以用另一个flexBox限制它.将此flex容器设置为外部flexBox中的flex项目.然而,外部的flexBox中的其他东西必须建立它的高度.

原文地址：https://www.jb51.cc/html/227932.html