在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;
}

