解决flex布局justify-content导致的多于元素对不齐问题

本文介绍: 效果如下这样的样子很丑可以使用计算宽度来解决：假设容器的宽度是600px,每个项目的宽度是110px,每行可以显示5个，剩余宽度= 600px-110x50px = 50,因为每行最多可以显示5个，50/5 = 10,给每个项目的margin–right 设置10px，最后一个不设置即可原理因为一个元素设置里flex，里面的元素就不严格区分块级或行内及了，所以可以设置宽高。我们未每个i元素设置和item一样的宽度，但是，所以我们看不见，也，当第二行只有1个的时候，不会影响，默认靠边界，当第二行有2、3

    &lt;style&gt;
      .wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 600px;
        background-color: #aff;
      }
      .item {
        width: 110px;
        height: 110px;
        background-color: #faa;
      }

    &lt;/style&gt;
  </head>
  <body>
    <div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>

    </div>
  </body>

效果如下
在这里插入图片描述
这样的样子很丑

可以使用计算宽度来解决：假设容器的宽度是600p x,每个项目的宽度是110p x,每行可以显示5个，剩余宽度= 600px-110×50px = 50,因为每行最多可以显示5个，50/5 = 10,给每个项目的margin–right 设置10px，最后一个不设置（div:nth-child(5n) {margin-right:0}）即可

部分代码

    <style>
      .wrapper > i {
        width: 110px; /*宽度要和每个项目的宽度一样*/
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <i></i><i></i><i></i>
    </div>
  </body>

因为一个元素设置里flex，里面的元素就不严格区分块级或行内及了，所以可以设置宽高。我们未每个i元素设置和item一样的宽度，但是高度是0，所以我们看不见，也不会影响布局，当第二行只有1个的时候，不会影响，默认靠边界，当第二行有2、3、4个的时候那么就剩下3、2、1个元素需要补位，正好我们添加了3个i元素.