flex布局：⼀⾏显⽰固定个数，强制换⾏且均匀分布（超出的分布靠左）
如图需求:
1. ⼀⾏只显⽰3个
2. 宽度随屏宽变化⽽⼀直保持三等份
3. ⾼度固定
4. 总数不是3的倍数时, 居左展⽰
由于评论区的提醒, 已优化更新。
总个数不受限, 超出部分居左，可按照⾃⼰所需的分布个数和间隙去动态调整宽度
-- html
<div class="card_wrap">
<div class="c_item"></div>
<div class="c_item"></div>
<div class="c_item"></div>
<div class="c_item"></div>
<div class="c_item"></div>
<div class="c_item"></div>
<div class="c_item"></div>
<div class="c_item"></div>
</div>
---css
.card_wrap {// ⼤盒⼦
width:98%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;// 替代原先的space-between布局⽅式
}
.c_item {// 每个item
flex:1;
height:120px;
margin:05px 5px 0;// 间隙为5px
background-color: #999;
width:calc((100%-10px)/3);// 这⾥的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
min-width:calc((100%-10px)/3);// 加⼊这两个后每个item的宽度就⽣效了
max-width:calc((100%-10px)/3);// 加⼊这两个后每个item的宽度就⽣效了
&:nth-child(3n){// 去除第3n个的margin-right
margin-right:0;
}html的flex布局
}

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