<分区>
CSS flex-wrap 如何让高度不拉伸(stretch)
box3, box1 和box4, box6 之间有很大的差距如何消除差距？所以每个 box 都可以有动态高度？
.wrap {
display: flex;
align-items: baseline;
align-content:flex-start;
justify-content: space-between;
flex-wrap: wrap;
background-color: lightblue;
}
.box {
display: flex;
background-color: tomato;
box-sizing: border-box;
border: 1px solid #C4C4C4;
height: 100px;
width: 45%;
margin-top: 15px;
}
.box1, .box4 {
height: 20px;
} <div class="wrap">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
<div class="box box6">box6</div>
</div>这是所需的布局。谢谢
最佳答案
flex 的默认方向是行，当你使用 flex-wrap: wrap 将溢出的元素向下推到另一行，行高将默认始终等于该行的最高元素，这就是为什么你看到元素有那个差距。
如果您将 flex 方向更改为 column 并为 wrap 元素提供固定高度，以便将溢出的元素从上到下推到右侧，就可以做到这一点。
.wrap {
/*Added these*/
height: 300px;
flex-direction: column;
/*-----------*/
display: flex;
align-items: baseline;
align-content: space-around;
flex-wrap: wrap;
background-color: lightblue;
}
.box {
display: flex;
background-color: tomato;
box-sizing: border-box;
border: 1px solid #C4C4C4;
height: 100px;
width: 45%;
margin-top: 15px;
}
.box1, .box5 {
height: 20px;
} <div class="wrap">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
<div class="box box6">box6</div>
</div>关于CSS flex-wrap 如何让高度不拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56999956/