这个问题在这里已有答案:
你好!你能帮助我吗?我正在尝试做两个列布局,同一列中的项目之间的间距相同。
.flex {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
}
.item {
width: 45%;
height: 200px;
margin-bottom: 10px;
background-color: navy;
}
.item:nth-child(1) {
height: 210px;
}
.item:nth-child(2) {
height: 500px;
}
.item:nth-child(3) {
height: 360px;
}
.item:nth-child(4) {
height: 400px;
}
.item:nth-child(5) {
height: 150px;
}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
感谢您提供的所有好建议和帮助!
你可以使用column-count
而不是flexbox
。在这种情况下,不需要实现灵活的盒子布局。您不是要保持相同的尺寸或调整任何奇数对齐。
.flex
{
margin: 0;
padding-left: 0;
list-style: none;
column-count: 2;
column-gap: 10px;
}
.item{
height: 200px;
margin-bottom: 10px;
background-color: navy;
break-inside: avoid;
}
.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
这是一种使用列间隙百分比的方法。它使用0px
column-gap
和容器上的负边距来调整左边和右边的多余边距。
.flex
{
margin: 0;
padding-left: 0;
list-style: none;
column-count: 2;
column-gap: 0;
margin: 0 -1.25%;
}
.item{
height: 200px;
margin-bottom: 10px;
background-color: navy;
break-inside: avoid;
margin: 0 2.5% 5%;
}
.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>