CSS flex布局实现最后一行左对齐

个人推荐使用after伪元素的方式实现
张大佬的博文: https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>
posted @ 2022-03-24 20:47  IslandZzzz  阅读(409)  评论(0)  编辑  收藏  举报