flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)

如图需求:1. 一行显示3个2. 强制换行3. 宽度不写死4. 高度固定-- html<div class="mycards"><div class="card_item"></div><div class="card_item"></div><div class="card_item"&g...

文章共908字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

Enidchan_

75483人浏览 · 2019-10-24 16:02:22

Enidchan_ · 2019-10-24 16:02:22 发布

在这里插入图片描述

如图需求:
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: 0 5px 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;
    }
 }