HTML/CSSの「flex」徹底解説！初心者でもわかる基本の使い方とコツ

はじめに

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

flexは頻繁に使われる

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

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

• グローバルナビやフッターの横並びメニュー
• カード型レイアウトのアイテムの高さを揃える
• レスポンシブ対応で縦・横の並び替え

書き方の例

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

1. 基本構文

index.html

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

style.css

.flex-container {
  display: flex;
}

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

2. よく使うプロパティ

プロパティ	役割	例
justify-content	主軸（横 or 縦）の並び方	center, space-betweenなど
align-items	交差軸（縦 or 横）の揃え方	center, flex-startなど
flex-direction	並び方向（横 or 縦）	row, column
gap	アイテム間のスペース	gap: 16px;

例：中央揃え＆間隔追加

style.css

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

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

3. 子要素ごとのサイズ指定

style.css

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

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

使いどころ

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

• ナビゲーションバー
  → リンクを横並び＆中央揃えで配置

• カードレイアウト
  → 商品一覧やブログカードなどで高さを揃えて並べる

• ボタン群の整列
  → 複数ボタンの等間隔＆高さ揃え

• 縦横の切り替え
  → レスポンシブで縦並び/横並びを簡単に切り替え

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

• display: flex;を指定し忘れている

• 要素が自動的に縮みすぎてしまう場合はmin-widthやflex-shrink: 0;を追加

• レイアウトが複雑な場合はgridと併用も検討

最後に

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