「要素を横に並べたい」「中央に揃えたい」「すき間を等間隔にしたい」そんなときに便利なのが CSSのflex（フレックスボックス） です。
レイアウトを簡潔に記述できるため、近年では多くのWebサイトで活用されています。この記事では、flexの基本から便利なレイアウト例までをやさしく解説します。

flexとは？

flexは、CSSのレイアウトモードの一つで、親要素にdisplay: flex;を指定することで、子要素（flex item）の配置や並び方を柔軟に制御できます。

主なプロパティ

• display: flex; – flexレイアウトを開始する親要素に指定
• justify-content – 横方向（主軸）の揃え方
• align-items – 縦方向（交差軸）の揃え方
• flex-direction – 子要素を横並び（row）か縦並び（column）にするか
• gap – 要素間のすき間を一括指定

よく使うパターン

① 要素を横に並べる

.container {
  display: flex;
}

② 横中央揃え・縦中央揃え

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

③ 要素間を均等に並べる（横並び）

.space-between {
  display: flex;
  justify-content: space-between;
}

補足：よく使うjustify-contentの値

• flex-start：左寄せ（初期値）
• center：中央揃え
• flex-end：右寄せ
• space-between：両端揃え、間が等間隔
• space-around：すべての間が均等

注意点

• 親にdisplay: flexを指定しないと子要素は影響を受けない
• align-itemsは、親要素の高さが必要な場合がある
• 複雑なレイアウトはGridとの併用もおすすめ

おわりに

flexを使いこなすと、横並び・中央揃え・等間隔といった基本レイアウトが非常に簡単に書けるようになります。
初心者の方は、まずdisplay: flexとjustify-contentから試してみましょう！