【前端基础】flex布局中使用`justify-content`后，最后一行的布局问题

flex布局中使用justify-content后，最后一行的布局问题

1、问题

• 想要的结果：
  

• 使用 justify-content: space-between; 后实际结果：
  

2、解决方法

1. 在最后追加 n 个 span 元素。n 的值 = 列数 - 2。
2. 设置span元素的宽度 = flex item 的宽度

※ span 换成 i 元素也行。

<!DOCTYPE html>
<html>

  <head>
    <title>Document</title>
      <style>

        .container {
          height: 500px;
          width: 500px;
          background-color: antiquewhite;
          margin: 0 auto;

          display: flex;

          flex-wrap: wrap;
          justify-content: space-between;
        }

        .item {
          width: 150px;
          height: 150px;

          background-color: aquamarine;

        }

         .item1 {
          background-color: orange;
         }

        .item2 {
          background-color: red;
         }

         .item3 {
          background-color: blueviolet;

         }

         .container span {
          width: 150px;
         }
      </style>
    </head>

    <body>
      <div class="container">
          <div class="item item1">box1</div>
          <div class="item item2">box2</div>
          <div class="item item3">box3</div>
          <div class="item item4">box4</div>
          <div class="item item4">box5</div>
          <div class="item item3">box6</div>
          <div class="item item2">box7</div>
          <div class="item item1">box8</div>
          <!-- 列数- 2  = 追加的span个数 -->
          <span></span>
      </div>
    </body>
</html>