你肯定会用到的CSS多行多列布局

前言：因为项目中使用flex过程中，如果采用space-between两端对齐，会遇到最后一行难以对齐的问题。本文主要对多行多列这种常见的布局，列出解决方案，方便大家日常开发使用。

创新互联建站是网站建设技术企业，为成都企业提供专业的成都做网站、网站设计，网站设计，网站制作，网站改版等技术服务。拥有10年丰富建站经验和众多成功案例，为您定制适合企业的网站。10年品质，值得信赖！

话不多说，直接进入正题：

方案一：标签补位
我们都知道，之所以对不齐是因为最后一行的子项目没有达到4个，space-between的对齐方式，自然会把中间空出来。既然如此，何不直接补位，让元素排满4个。

效果如下：

如果子元素个数不是4个怎么办？我们细心观察，不难发现，最后一行的最小值是1个，那么我们只需要补位n-1个即可。如果只有3个，也可以用伪元素::after去补最后一个位置。

方案二：计算剩余空间
如果我们知道最后一行剩余空间的话，完全可以控制最后一个元素的边距或者缩放比例去占满剩下的空间，自然就能左对齐了。要做到这一点，首先得确定宽度和边距，宽度通常是已知的，我们只需要把边距确定下来，就能确认剩余空间。

接上面的的例子，假设一行有4个，每个占比24%，4个就是24% * 4 = 96% ，那么可以确定总边距是4%，由于一行有4个元素，而最后一个的右边距是多余的，那么可以确定单个的边距为 4% / 3 = 1.333% , 计算出来后就可以开始写代码了：

效果如下：

可能有些小伙伴觉得懒得记，那么下面直接给出封装好的sass mixin, 复制即可使用:

 
 
 
   
  
  
  /**   
  
  
   * 多列布局   
  
  
   * $count 项目数量   
  
  
   * $itemWidth 项目宽度，百分比，不含百分号   
  
  
   * $itemHeight 项目高度，随意   
  
  
   */   
  
  
  @mixin grid($count:4, $itemWidth:20, $itemHeight:auto) {   
  
  
      $rest: 100 - $itemWidth * $count; // 剩余空间   
  
  
      $space: percentage($rest/($count - 1)/100); // 边距   
  
  
      display: flex;   
  
  
      flex-wrap: wrap;   
  
  
     
  
  
      /*此处的*号建议替换成具体的布局容器（div，view...），以加快css解析*/   
  
  
      & > * {   
  
  
          flex: 0 0 #{$itemWidth + '%'};   
  
  
          height: $itemHeight;   
  
  
          margin-right: $space;   
  
  
          margin-bottom: $space;   
  
  
          box-sizing: border-box;   
  
  
     
  
  
          &:nth-child(#{$count}n) {   
  
  
              margin-right: 0;   
  
  
          }   
  
  
     
  
  
          &:nth-last-child(-n + #{$count}) {   
  
  
              margin-bottom: 0;   
  
  
          }   
  
  
     
  
  
          /*为了兼容space-between的布局，占满剩余空间*/   
  
  
          &:last-child {   
  
  
              margin-right: auto;   
  
  
          }   
  
  
      }   
  
  
  }   
  
  
     
  
  
  /*使用方法*/   
  
  
  .list{   
  
  
      /* 一行4项，每项20%宽度 */   
  
  
      @include grid(4,20)   
  
  
  }