display: flex とflex-wrap: wrapを使って単純に要素を複数行に並べようとすると、要素が偶数個なのにのときに1つ余ってしまう事がある

↓これを

1 2 3 4

.wrapperA { display: flex; justify-content: center; flex-wrap: wrap; width: 300px; gap: 10px; background-color: #abd8ee; padding: 10px; } .itemA { height: 50px; width: 50px; background-color: #cc334d; }

↓このように余らせないで

1 2 3 4

.wrapperB { display: flex; justify-content: center; flex-wrap: wrap; width: 200px; gap: 10px; background-color: #abd8ee; padding: 10px; } .itemB { height: 50px; width: 50px; background-color: #cc334d; }

↓きちっと正方形に収めたい

1 2 3 4

.wrapperC { display: grid; grid-template-columns: auto auto; width: fit-content; gap: 10px; background-color: #abd8ee; padding: 10px; } .itemC { height: 50px; width: 50px; background-color: #cc334d; }

元の状態

1 2 3 4

.wrapperD { display: flex; justify-content: center; flex-wrap: wrap; width: 200px; /* ここから下はデザイン用 */ gap: 10px; background-color: #abd8ee; padding: 10px; } .itemD { height: 50px; width: 50px; background-color: #cc334d; }

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 200px;

      /* ここから下はデザイン用 */
      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>

display: flexとitemに50%を指定する方法

子要素(item)のサイズが変わっても大丈夫な場合に有効

1 2 3 4

.wrapperE { display: flex; justify-content: center; flex-wrap: wrap; width: 200px; gap: 10px; background-color: #abd8ee; padding: 10px; } .itemE { height: 50px; width: calc(50% - 10px); /* 変更Point */ background-color: #cc334d; }

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 200px;

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: calc(50% - 10px); /* 変更Point */
      background-color: #cc334d;
    }
  </style>

display: gridを使う方法 1

隙間が変わっても大丈夫な場合に有効

1 2 3 4

.wrapperF { display: grid; /* 変更Point */ grid-template-columns: auto auto; /* 変更Point */ place-items: center; /* 変更Point */ width: 200px; gap: 10px; background-color: #abd8ee; padding: 10px; } .itemF { height: 50px; width: 50px; background-color: #cc334d; }

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: grid; /* 変更Point */
      grid-template-columns: auto auto; /* 変更Point */
      place-items: center; /* 変更Point */
      width: 200px;

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>

display: gridを使う方法 2

親のサイズが変わっても大丈夫な場合に有効

1 2 3 4

.wrapperG { display: grid; /* 変更Point */ grid-template-columns: auto auto; /* 変更Point */ width: fit-content; /* 変更Point */ gap: 10px; background-color: #abd8ee; padding: 10px; } .itemG { height: 50px; width: 50px; background-color: #cc334d; }

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: grid; /* 変更Point */
      grid-template-columns: auto auto; /* 変更Point */
      width: fit-content; /* 変更Point */

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>

HTMLに行ごとのdivを追加する方法

HTMLを書き換えることに躊躇がない場合に有効

1 2

3 4

.wrapperH { display: flex; justify-content: center; flex-wrap: wrap; width: 200px; gap: 10px; background-color: #abd8ee; padding: 10px; } /* 変更Point */ .lineH { display: flex; gap: 10px; } .itemH { height: 50px; width: 50px; background-color: #cc334d; }

  <div class="wrapper">
    <!-- 変更Point -->
    <div class="line">
      <span class="item">1</span>
      <span class="item">2</span>
    </div>
    <!-- 変更Point -->
    <div class="line">
      <span class="item">3</span>
      <span class="item">4</span>
    </div>
  </div>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 200px;

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    /* 変更Point */
    .line {
      display: flex;
      gap: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>