【CSS】Flexboxとは？要素の横並びを図解でやさしく解説

どうも、くじらいどです。

要素を横並びにしたいだけなのに、CSSだと意外と手こずる。自分も昔は float で無理やり並べては崩れて、「なんで横に並ぶだけでこんな苦労すんの…」とよくため息をついてました。

それが Flexbox（フレックスボックス） を覚えてから、一気にラクになったんですよね。「親に一言 display: flex; と書くだけで、中の要素が横に並ぶ」という仕組みです。

この記事では、Flexbox の考え方と、よく使う justify-content／align-items を、実際に動く図で整理していきます。

くじらいど

横並び・中央寄せ・等間隔、このあたりは今ほぼ全部 Flexbox でやります。ここを押さえると、レイアウトの自由度が一気に上がります。

結論：親に display: flex で中身が横並びになる

Flexbox は「並べ方を、親（囲っている箱）が指示する」仕組みです。整列係の親が「みんな横一列に並んで」と号令をかけるイメージですね。

ふつう要素は縦に積まれますが、親に display: flex; を付けるだけで、中の子要素が横に並びます。

.parent {
  display: flex;   /* これだけで子が横並び */
}

▼ 表示例（上＝ふつう／下＝親に display: flex）

ポイントは、設定するのは「子」ではなく「親」だということ。親が並べ方の司令塔になります。

justify-content｜横方向の並べ方

justify-content は横方向（並んでいる向き）の配置を決めます。中央寄せも等間隔も、これ一つです。

▼ 表示例（同じ3つの箱が、値によってどう動くか）

ナビメニューを両端に散らしたいときは space-between、ボタンを真ん中に置きたいときは center、という感じで使い分けます。

align-items｜縦方向の揃え方

align-items は縦方向（横並びに対して垂直）の揃え方です。高さがバラバラな要素をきれいに揃えたいときに使います。

▼ 表示例（高さの違う箱を center で中央に揃える）

よく使う2つ：gap と flex-wrap

実務でほぼ必ず使う2つも覚えておくと便利です。

• gap：箱と箱のすき間をまとめて指定（gap: 12px;）。margin で1個ずつ調整するより断然ラク
• flex-wrap: wrap;：横に入りきらないとき、自動で次の行に折り返す。スマホ対応で必須

ちなみに gap に使う px や rem の違いはpx / % / rem / em / vw の違いに、そもそもの書き方はそもそもCSSとは？にまとめています。

まとめ

• Flexbox は「並べ方を親が指示する」仕組み。親に display: flex; で子が横並び
• justify-content＝横方向の配置（左寄せ・中央・等間隔）
• align-items＝縦方向の揃え（高さバラバラを揃える）
• ど真ん中は justify-content: center; align-items: center; の合わせ技
• すき間は gap、折り返しは flex-wrap: wrap;

Flexbox は、最初に「親が司令塔」「横は justify、縦は align」の2つさえ掴めば、あとは触りながら覚えていけると思います。横並び・中央寄せで悩んでいた時間が、けっこう返ってくるはずです。

以上、くじらいどでした！

あわせて読みたい

あわせて読みたい

【CSS】そもそもCSSとは？仕組みを図解で解説 どうも、くじらいどです。 HTMLとセットでよく聞く「CSS」。名前は知ってるけど、結局これが何をしてるのかよくわからない、という人はけっこう多いと思います。 自分も…

あわせて読みたい

【CSS】px / % / rem / em / vw の違い【図解】 どうも、くじらいどです。 CSSの数字のうしろに付いてる px とか rem とか vw。なんとなく px だけ使ってる人、けっこう多いと思います。 これ、全部「何を基準にした長…

あわせて読みたい

【CSS】CSSが効かないときの原因【詳細度・優先順位】 どうも、くじらいどです。 CSSを書いたのに色が変わらない。余白が入らない。書いたはずのコードが、なぜか無視される。 これ、CSSを触ったことがある人なら全員通る道…