flex布局 最后一行无法左对齐的解决方案

CrazyMing 2018-05-15
3条评论 3,851 次浏览
CrazyMing 2018-05-153条评论 3,851 次浏览

今天在项目使用flex布局做一个列表,在列表父级元素 使用了 justify-content: space-between; 这样让列表实现了 两端对齐,列表项目的左右间距相等,效果如下:

这样做会发现最后一行如果列数无法与上面行的列数一致的话,,会很难看, justify-content: space-between的作用是把每一行剩余的空间等分给 项目之间的间距,最后一行  由于只有三个项目,所以项目间的间距比别的大。以前也有遇到过几次这样的问题,也没时间琢磨,就没有使用flex布局。。。


解决方法:

根据列数在末尾添加几个空的项目,比如有4列,我们就在后面添加四个多余项目,效果如下:

我们把末尾这四个 多余的项目变得不可见(将高度设为0),就解决了问题!

效果如下:

代码如下:

html:

 <div class="main">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>

      <li style="width: 300px; background-color: #409eff;height: 0"></li>
      <li style="width: 300px; background-color: #409eff;height: 0"></li>
      <li style="width: 300px; background-color: #409eff;height: 0"></li>
      <li style="width: 300px; background-color: #409eff;height: 0"></li>

    </ul>

  </div>

css:

<style lang="less">
  .main{
    .list{
      background-color: #4fff69;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      align-content: flex-start;

      li{
        width: 300px;
        height: 80px;
        background-color: #ffef48;
        align-content: flex-start;
        margin-bottom: 50px;
      }
    }
  }

</style>

0

flex布局 最后一行无法左对齐的解决方案” 有 3 条评论

发表评论

电子邮件地址不会被公开。