flex布局，均分可换⾏，左对齐实现效果
思路：放⼤于⼀排数量的空标签占位。
上图其实是这样的，关键点将空标签⾼度设0，避免影响布局。
关键代码
<div class="box">
<div class="item">西城区</div>
<div class="item">平⾕区</div>
<div class="item">顺义区</div>
<div class="item">密云区</div>
<div class="item">门头沟</div>
<div class="item hidden"></div>
<div class="item hidden"></div>
<div class="item hidden"></div>
<div class="item hidden"></div>
</div>
.box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item{
flex: 0 0 30%;
height: 30px;
margin-bottom: 10px;
}
.item.hidden{
height: 0px;
box-sizing: border-box;flex布局对齐方式
margin: 0 !important;
padding: 0 !important;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。