flex+margin父盒子使用display: flex; 子盒子可以使用margin: auto 吃掉剩余空间，实

父盒子使用display: flex; 子盒子可以使用margin: auto 吃掉剩余空间，

实现一些单独使用flex布局很难实现的布局。

例1：最后一个盒子到最右边

只需要给最后一个盒子设置：margin-left: auto

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      border: 1px solid #ccc;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .container .box {
      width: 50px;
      height: 50px;
    }

    .container .box.item1 {
      background-color: pink;
    }

    .container .box.item2 {
      background-color: #f40;
    }

    .container .box.item3 {
      background-color: skyblue;
    }

    .container .box.item4 {
      background-color: #008c8c;
      margin-left: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box item1"></div>
    <div class="box item2"></div>
    <div class="box item3"></div>
    <div class="box item4"></div>

  </div>
</body>

</html>

例2：中间2个盒子居中，其他2个盒子在两边

给第2个盒子设置：margin-left: auto;

给第3个盒子设置：margin-right: auto;

这样2，3两个盒子平分剩余空间

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      border: 1px solid #ccc;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .container .box {
      width: 50px;
      height: 50px;
    }

    .container .box.item1 {
      background-color: pink;
    }

    .container .box.item2 {
      background-color: #f40;
      margin-left: auto;
    }

    .container .box.item3 {
      background-color: skyblue;
      margin-right: auto;
    }

    .container .box.item4 {
      background-color: #008c8c;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box item1"></div>
    <div class="box item2"></div>
    <div class="box item3"></div>
    <div class="box item4"></div>

  </div>
</body>

</html>

例3：每多少个盒子均分每一行，超出的换行

给父盒子设置：flex-wrap: wrap;

使用calc((100% - 每个子盒子宽度 * 子盒子个数) / 子盒子个数 / 2) 计算出每个子盒子每边应该分配多少margin

可以使用变量--gap --w --n 方便以后调整

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .container {
        border: 1px solid #ccc;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .container .box {
        width: 50px;
        height: 50px;
        --n: 6;
        --gap: calc((100% - 50px * var(--n))/var(--n)/2);
        margin: 10px var(--gap);
      }

      .container .box.item1 {
        background-color: pink;
      }

      .container .box.item2 {
        background-color: #f40;
      }

      .container .box.item3 {
        background-color: skyblue;
      }

      .container .box.item4 {
        background-color: #008c8c;
      }

    </style>
  </head>

  <body>
    <div class="container">
      <div class="box item1"></div>
      <div class="box item2"></div>
      <div class="box item3"></div>
      <div class="box item4"></div>
      <div class="box item1"></div>
      <div class="box item2"></div>
      <div class="box item3"></div>
    </div>
  </body>

</html>