html box填充,html – 使用Flexbox,扩展元素以填充行之间的间隙

当人们告诉你如何解决问题时,他们并没有告诉你为什么你没有预期的结果.我认为这部分是因为他们中的大多数都错过了实际的问题.我觉得这很有趣.

让我先解决一些问题：

Flex-direction ::出于实际目的,它表示项目的显示方向.然而,它并不准确.

现在让我们说如果方向设置为行,则意味着每个项目必须具有容器的高度,并且它们应该彼此相邻.换句话说,容器必须被视为一行,而项目是列.

.c{

display: flex;

width: 400px;

height:100px;

}

.c1{

flex-grow: 1;

background:gold;

}

.c2{

flex-grow: 1;

background:red;

}

我没有指定高度,项目填充行的高度,并像列一样堆叠在一起.

指定高度时,项目将采用您定义的高度,但不会更改行的高度：

.c{

display: flex;

width: 400px;

height: 100px;

}

.c1{

flex-grow: 1;

height: 40px;

background:gold;

}

.c2{

flex-grow: 1;

background:red;

}

红色立方体仍然会产生垂直空间,因为行的高度没有改变.

flex grow：分配给不同项目的可用空间量.

.c{

display: flex;

width: 400px;

}

.c1{

flex-grow: 1;

background:gold;

}

.c2{

flex-grow: 1;

background:red;

}

AAAAAAAAAAAAA

尽管具有相同的flex-grow值,但这两个项目的大小不同,这是因为自由空间分布在它们之间,但黄色矩形开始时更大.

首先让我们使用flex-wrap：wrap：

.c{

display: flex;

flex-wrap: wrap;

border: 1px solid black;

width: 400px;

height:100px;

}

.c1{

width:200px;

background:gold;

}

.c2{

width:200px;

background:red;

}

.c3{

width:100px;

background:orange;

}

.c4{

width:300px;

background:green;

}

我们可以看到,当我们超出可用宽度的数量时,项目开始,有效地创建另一行.

现在来解决你的问题：

如果我们采用上面的例子并设置第一项的高度怎么办？让我们来看看：

.c{

display: flex;

flex-wrap: wrap;

border: 1px solid black;

width: 400px;

height:100px;

}

.c1{

width:200px;

height: 30px;

background:gold;

}

.c2{

width:200px;

background:red;

}

.c3{

width:200px;

background:orange;

}

.c4{

width:200px;

background:green;

}

就像你的片段一样.

让我们看另一个例子：

.c{

display: flex;

flex-wrap: wrap;

border: 1px solid black;

width: 600px;

height:100px;

}

.c1{

width:400px;

height: 35px;

background:gold;

}

.c2{

width:200px;

background:red;

}

.c3{

width:200px;

background:orange;

}

.c4{

width:200px;

background:green;

}

.c5{

width:200px;

background:purple;

}

>放置400px X 35px的黄色立方体并跨越2列,然后放置200px的红色立方体并跨越1列.

>此时所有矩形的高度均为0,除了第一个具有35px的矩形.

>剩余的垂直空间在行之间划分,以产生整个垂直空间.因此剩余的垂直空间是100-35 = 65px.

分为2行= 32.5.第一行得到35 32.5,第二行得到32.5px高度.

另一个让事情更清晰的例子：

.c,.d{

display: flex;

flex-wrap: wrap;

border: 1px solid black;

width: 600px;

height:100px;

}

.c1{

flex-shrink: 0;

width:400px;

height: 0px;

background:gold;

}

.c2{

width:200px;

background:red;

}

.c3{

width:200px;

background:orange;

}

.c4{

width:200px;

background:green;

}

.c5{

width:200px;

background:purple;

}

.d1{

width:400px;

height: 50px;

background:gold;

}

.d2{

width:200px;

background:red;

}

.d3{

width:200px;

background:orange;

}

.d4{

width:200px;

background:green;

}

.d5{

width:200px;

background:purple;

}

First item has 0px height,the vertical space remaining (100px) is divided between the 2 rows. Both row have 50px height

First item has 35px height,the vertical space remaining (65px) is divided between the 2 rows.

要解决此问题,您可以使用calc()来计算其他行的高度,就像其他人建议的那样.原因是没有更多的自由垂直空间可供共享.

.c{

display: flex;

flex-wrap: wrap;

border: 1px solid black;

width: 600px;

height:100px;

}

.c1{

width:400px;

height: 35px;

background:gold;

}

.c2{

width:200px;

background:red;

}

.c3{

height:calc(100% - 35px);

width:600px;

background:green;

}