float列表两端对齐

我们在开发项目的时候，往往会碰到列表，从左至右依次排列的列表，循环的同时并要保证两端对齐，要是使两端对齐右一下方法：

• flex 盒子 justify-content: space-between方式
• float浮动，设置父元素所有外边距负值

---

flex 方式

这种方式使用最简单，只要设置父元素为display:flex,子元素会两端对齐：

<div class="list">
       <div class="list-item">
           1
       </div>
       <div class="list-item">
           2
       </div>
       <div class="list-item">
           3
       </div>
       <div class="list-item">
           4
       </div>
       <div class="list-item">
           5
       </div>
       <div class="list-item">
           6
       </div>
   </div>

.list {
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           width: 400px;
           padding: 5px;
           border: 1px solid green
       }

       .list-item {
           height: 100px;
           width: 100px;
           line-height: 100px;
           margin-bottom: 12px;
           text-align: center;
           border: 1px solid #e5e5e5;
       }

这种方式很简单，但缺点就是有兼容性有兼容性的问题，而且当子元素只有两个的时候，就出现左右各一个，按照列表的循环应该是从左至右，现在左右各一个，不符合需求。这种方式舍弃。

float 列表

这种方式设置自元素全部float:left向左浮动

<div class="wraper">
      <div class="list">
          <div class="list-item">
              1
          </div>
          <div class="list-item">
              2
          </div>
          <div class="list-item">
              3
          </div>
          <div class="list-item">
              4
          </div>
          <div class="list-item">
              5
          </div>
          <div class="list-item">
              6
          </div>
      </div>
  </div>

.wraper {
            margin: 0 auto;
            width: 400px;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid green;
            margin-bottom: 20px;
        }

        .list {
            overflow: hidden;
           margin-right: -40px;
        }
        //清除浮动
        .list::after {
            content: "";
            display: block;
            clear: both;
        }

        .list-item {
            height: 100px;
            width: 100px;
            float: left;
            margin-bottom: 12px;
            margin-right: 40px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #e5e5e5;
        }

父元素margin-right取自元素margin-right的负值就可以成功设置左右两端对齐，也不会出现flex那种问题

赏

谢谢你请我吃糖果

支付宝

微信