はじめに

HTMLやCSSでレイアウトを組む際、flex（フレックスボックス）は今や欠かせない存在です。しかし、「なんとなく使っているけど実はよく分かっていない」という方も多いのではないでしょうか？この記事では、flexの基本的な使い方から、よくあるパターン、注意点までを分かりやすくまとめます。

flexは頻繁に使われる

従来のfloatやinline-blockによるレイアウトでは、要素の高さ揃えや中央寄せ、間隔の調整などが難しい場面が多くありました。
flexは、「横並び」や「縦並び」・「均等配置」・「中央揃え」 など、Webサイトで頻出するレイアウトをとても簡単に実現できます。

例：こんな時にflexが便利！

まずは基本の書き方から。

index.html

<div class="flex-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

style.css

.flex-container {
  display: flex;
}

横方向に並んでいるのがわかります。

例：中央揃え＆間隔追加

style.css

.flex-container {
  display: flex;
  /* ここから */
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* ここまで追記 */
}

余白が作られレイアウトが整ったのがわかります。

style.css

.flex-container > div {
  flex: 1; /* 全部同じ幅で均等に分ける */
}

画面幅の中で均等に分けられているのがわかります。

flexは下記のようなシーンで活躍します。

補足：よくある失敗例と注意点

flexは覚えておくだけでHTML/CSSのコーディングがとても楽になります。シンプルな書き方で複雑なレイアウトも実現できるので、ぜひ積極的に活用してみてください。