【CSS】flex-wrap: balance の使い方｜Flexbox の折り返しをバランスよく分配

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

flex-wrap: balanceについてのメモ。

flex-wrap: balance とは

flexbox でアイテムを並べているとき、最終行だけやけにスカスカになるときがあります。

7個並べたら 5+2 に折り返して、2個だけ取り残されたような見た目になるような。flex-wrap: balance;ではそのあたりいい感じに折り返してくれます。各行のアイテム数を自動でバランスよく分配してくれるプロパティです。

<ul class="tag-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Flexbox</li>
  <li>Grid</li>
  <li>レスポンシブ</li>
  <li>アニメーション</li>
</ul>
.tag-list {
  display: flex;
  flex-wrap: balance;
  gap: 8px;
}


.tag-list li {
  background-color: orange;
}

もしflex-wrap: wrap;の場合、以下のような配置になることがあります。

なお、折り返しを逆にすることもできます。

.tag-list {
  flex-wrap: balance wrap;        /* 通常の折り返し方向 */
  /* flex-wrap: balance wrap-reverse; */ /* 逆方向 */
}

2026年7月時点では、対応状況は以下のようになります。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧