子元素从左往右排列，均匀分布，自动换行（子元素个数不确定）

经常碰到一些页面，展示不确定个数的卡片，要求从左往右排列，均匀分布，超出指定个数需要换行，如果一行不满指定个数，仍然从左开始排列。
如果每行个数相同，那使用 flex弹性布局，设置 justify-content: space-between即可，但个数不确定，如果最后一行个数不满，那就跟前面几行的排列样式不一致了。（也可能是我没找对方法）
—— 因此，自己写了一个使用 float浮动➕ calc计算来达到此要求的 css样式，以此记录。
（以每行5个为例，卡片宽度是固定的，如果不固定，也可以变换计算方法来达到目的）

• 页面效果

• HTML代码

  <p>一行 不满5个</p>
  <div class="wrap">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
  </div>
  
  <p>多行 最后一行不满5个</p>
  <div class="wrap">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
  </div>
  
  <p>多行 最后一行正好5个</p>
  <div class="wrap">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
  </div>

• CSS代码

	* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: #EEEEEE;
    }
    .wrap {
      overflow: hidden;
      width: 100%;
      padding: 20px;
      background-color: goldenrod;
      margin-bottom: 20px;
    }
    .wrap .card {
      float: left;
      width: 200px;
      height: 100px;
      padding: 8px;
      background: #FFFFFF;
      border-radius: 4px;
      /* 每5个一行，每个间隔(100%-卡片宽度*5)/4 */
      margin-right: calc(25% - 250px);
    }
    .wrap .card:nth-of-type(5n) {
      /* 每行第5个不需要列间隔 */
      margin-right: 0;
      /* 每行第5个设置行间隔=>不足5个即为最后一行，不需要行间隔 */
      margin-bottom: 20px;
    }
    .wrap .card:last-of-type {
      /* 最后1个不需要行间隔=>防止最后一行正好有5个 */
      margin-bottom: 0;
    }