如何使用flexbox进行两列布局，并在列中的项目之间使用相同的间距？ [重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用flexbox进行两列布局，并在列中的项目之间使用相同的间距？ [重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
你好！你能帮助我吗？我正在尝试做两个列布局，同一列中的项目之间的间距相同。
.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>以上是关于如何使用flexbox进行两列布局，并在列中的项目之间使用相同的间距？ [重复]的主要内容，如果未能解决你的问题，请参考以下文章