flex布局: 一行显示固定个数，换行展示

念念ovo

已于 2022-05-12 16:45:15 修改

阅读量1.1w

点赞数 10

文章标签： css3 css 前端

于 2022-05-11 15:20:00 首次发布

本文链接：https://blog.csdn.net/weixin_52827704/article/details/123914911

版权

效果图如下：
以一行显示4个为例
在这里插入图片描述
代码如下

    <div class="exam-list">
      <div class="exam-item">竞赛封面</div>
      <div class="exam-item">竞赛简介</div>
      <div class="exam-item">排行榜详情</div>
      <div class="exam-item">环节1</div>
      <div class="exam-item">环节2</div>
      <div class="exam-item">环节3</div>
    </div>

---css 代码
.exam-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .exam-item {
      flex: 1;
      height: 140px;
      text-align: center;
      margin: 0 20px 20px 0; // 间隙为20px
      padding-top: 20px; 
      border: 1px solid #888;
      box-sizing: border-box;
      
      width: calc((100% - 60px) / 4);   // 我这里一行显示4个 所以是/4  一行显示几个就除以几 
      // 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 60px) / 4);
      max-width: calc((100% - 60px) / 4);
      
      &:nth-child(4n + 4) {
        margin-right: 0;
      }  
    }
  }