我的目标是使用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"> </div> <div class="item two"> </div> <div class="item three"> </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中的其他东西必须建立它的高度.