flex布局: 一行显示固定个数,强制换行且均匀分布

flex布局: 一行显示固定个数,强制换行且均匀分布_第1张图片

如图需求:
1. 一行显示3个
2. 强制换行
3. 宽度不写死
4. 高度固定

-- html
<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
.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;
  }

你可能感兴趣的:(flex布局: 一行显示固定个数,强制换行且均匀分布)