「要素を横に並べたい」。ここで最初につまずく人はとても多いです。かつては float という指定が使われていましたが、いまは Flexbox を使えば1行で解決します。

親に display: flex を書くだけ

ポイントは、並べたい要素そのものではなく、それらを囲んでいる親に指定することです。親が「中身を横に並べる箱」に変わり、中の要素が自動的に横並びになります。

CODE横並びの最小構成コードを書き換えると、すぐ下で動きます

style.css の display: flex を消してみてください。縦に戻ります。これが Flexbox の効果です。

覚えるのは3つ

  • gap … 要素と要素の間隔。margin より簡単で、端に余分な余白が付かない
  • justify-content … 横方向の位置。左寄せ・中央・両端揃えなどを決める
  • align-items … 縦方向の位置。高さの違うものを上・中央・下で揃える

justify-content でよく使う値は flex-start（左寄せ・初期値）、center（中央）、space-between（両端に寄せて間を均等に）の3つです。ナビゲーションの「ロゴは左、メニューは右」は space-between で作れます。

CODEjustify-content を切り替えるコードを書き換えると、すぐ下で動きます

space-between を center や flex-end に書き換えてみてください。3つの箱の位置が変わります。

上下中央揃えも1行で終わる

かつては面倒だった「箱の中で上下中央に置く」も、Flexboxなら justify-content と align-items を両方 center にするだけです。

CODE上下左右の中央に置くコードを書き換えると、すぐ下で動きます

align-items を flex-start にすると上に、flex-end にすると下に寄ります。

画面が狭いときは折り返す

横並びのままだと、スマホで要素がつぶれてしまいます。flex-wrap: wrap を足しておくと、入りきらない要素が次の行へ折り返します。まずはこれだけ知っておけば、極端な崩れは防げます。本格的な出し分けは、メディアクエリで行います。