css flex布局最后一行左对齐

    <div class="ul-2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">2</div>
        <div class="item">2</div>
        <div class="item">2</div>
        <div class="item">2</div>
        <div class="item">2</div>
        <div class="item">2</div>
      </div>

      <style>
        .ul-2 {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          width: 210px;
        }
        .ul-2::after {
          content: '';
          flex: auto;
        }
        .ul-2 .item {
          margin: 0 5px;
          width: 60px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          background-color: #2a7600;
          list-style: none;
          margin-bottom: 20px;
        }
      </style>
posted @ 2021-12-02 14:36  IslandZzzz  阅读(118)  评论(0编辑  收藏  举报