css3 flex布局 justify-content:space-between 最后一行左对齐

flex布局最后一行左对齐

随着flex布局的流行，我们工作中也免不了用flex布局，在使用flex布局的时候，大家应该也和我一样遇到过justify-content:space-between最后一行左对齐的问题，于是这篇文章专门整理了一下

第一种：一行三列的情况

style统一样式

 * {
        margin: 0;
        padding: 0;
    }

    div {
        padding: 20px;
        width: 500px;
        margin: 0 auto;
    }

    .title {
        text-align: center;
    }
 .sub_title{
        margin: 20px 0px;
    }
.list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

html部分

<div>
        <h2 class="title">flex布局最后一行左对齐</h2>
        <h3 class="sub_title">一行三列的情况</h3>
        <ul class="list list1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
           <li></li>
        </ul>
    </div>

一行三列CSS部分

  .list1 li {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 30%;
        min-height: 36px;
        background-color: #12a8ff;
        margin-bottom: 10px;
    }
    .list1 li:last-child:nth-child(3n + 2) {
        background: hotpink;
        margin-right: calc((100% - 30%) / 2);
   }

效果展示图：

image.png

第二种：一行四列的情况

html部分：

 <div>
       <h3 class="sub_title">一行四列的情况</h3>
       <ul class="list list2 ">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
         /* 一行四列多余三个 */
      <!-- <li></li> -->
       </ul>
   </div>

一行四列CSS部分：

.list2 li {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 24%;
        min-height: 36px;
        background-color: #12a8ff;
        margin-bottom: 10px;
    }
  /* 一行四列多余两个 */
    .list2 li:last-child:nth-child(4n+2) {
        background-color: orange;
        margin-right: calc((100% - 24%) / 3 * 2);
    }

/* 一行四列多余三个 */
    .list2  li:last-child:nth-child(4n+3) {
        background-color: pink;
        margin-right: calc((100% - 24%) / 3 * 1);
    }

效果图：

image.png

第三种：一行五列的情况

html部分：

<div>
        <h3 class="sub_title">一行5列的情况</h3>
        <ul class="list list3">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

一行五列CSS部分：

.list3 li {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 18%;
        min-height: 36px;
        background-color: #12a8ff;
        margin-bottom: 10px;
    }

    .list3 li:last-child:nth-child(5n+2) {
        background-color: orangered;
        margin-right: calc((100% - 18%) / 4 * 3);
    }

    .list3 li:last-child:nth-child(5n+3) {
        background-color: hotpink;
        margin-right: calc((100% - 18%) / 4 * 2);
    }

    .list3 li:last-child:nth-child(5n+4) {
        background-color: blueviolet;
        margin-right: calc((100% - 18%) / 4 * 1);
    }

效果图：

image.png

第四种：一行不固定情况

html部分：

 <div>
        <h3 class="sub_title">一行不固定的情况</h3>
        <ul class="list list5">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

一行不固定CSS部分：

   .list5 {
        display: grid;
        grid-template-columns: repeat(auto-fill, 80px);
        grid-gap: 10px;
    }

    .list5  li {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 80px;
        min-height: 36px;
        background-color: #12a8ff;
        margin-bottom: 10px;
    }

效果图：

image.png

附：flex布局兼容的浏览器

image.png