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

最新推荐文章于 2024-03-20 10:31:02 发布

郑建零零发

最新推荐文章于 2024-03-20 10:31:02 发布

阅读量2.2k

点赞数 2

分类专栏： js vue 文章标签：前端 html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_52421092/article/details/128806607

版权

js 同时被 2 个专栏收录

86 篇文章 3 订阅

订阅专栏

vue

75 篇文章 2 订阅

订阅专栏

如图需求:

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