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

如图需求:

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