关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

css flex固定一行几个如显示一行4个多行布局

发布2021-07-23 浏览4652次

详情内容

在css flex进行布局时,也会遇到一行固定显示多少个,但加了宽度不起效果。

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

image.png

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


点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载