在css flex进行布局时,也会遇到一行固定显示多少个,但加了宽度不起效果。
如图需求:
1. 一行显示3个
2. 强制换行
3. 宽度不写死
4. 高度固定
<div class="mycards"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> </div>
css flex代码
.mycards{ // 大盒子 width: 98%; display: flex; flex-wrap: wrap; justify-content: space-between; } .card_item{ // 每个item flex: 1; width: 33.3%; min-width: 33.3%; /* 加入这两个后每个item的宽度就生效了*/ max-width: 33.3%; /* 加入这两个后每个item的宽度就生效了*/ height: 350px; }