【CSS】Flexboxが分からない人へ ― 図解で覚える基本パターン5つ
この記事で解決すること 「Flexboxって便利らしいけど、何がどう動くのか分からない…」 CSSで要素を横に並べたい、中央に寄せたい。そんなときに使うのがFlexboxです。覚えるべきパターンは5つだけ。コピペで使えるコードと一緒に解説します。 Flexboxとは Flexboxは、CSSで要素の配置を簡単にコントロールするための仕組みです。 従来は float や inline-block を使って横並びにしていましたが、Flexboxなら1行で実現できます。 /* これだけで子要素が横並びになる */ .container { display: flex; } 基本の考え方 Flexboxには「親要素（コンテナ）」と「子要素（アイテム）」の関係があります。 <div class="container"> ← 親（display: flexを指定） <div class="item">A</div> ← 子 <div class="item">B</div> ← 子 <div class="item">C</div> ← 子 </div> 親に display: flex を指定すると、子要素の並び方をコントロールできるようになります。 パターン1：横並び 最も基本的な使い方です。 .container { display: flex; } 変更前： 変更後： ┌───┐ ┌───┐┌───┐┌───┐ │ A │ │ A ││ B ││ C │ └───┘ └───┘└───┘└───┘ ┌───┐ │ B │ └───┘ ┌───┐ │ C │ └───┘ display: flex を指定するだけで、子要素が自動的に横並びになります。 ...