Flexboxでレイアウト

このレッスンでは、CSSのFlexboxを使ったレイアウトの基本を学び、要素を横並びに配置できるようになることを目標にします。「CSS Flexbox 使い方」「display flex 初心者」で調べている方向けです。

display: flex;を使うと、要素を横並び(または縦並び)に簡単に配置できます。以前はレイアウト調整が難しい作業でしたが、Flexboxの登場によって、要素の並べ方・間隔・揃え方を短いコードで直感的に指定できるようになりました。

サンプルコードでは、.box-rowにdisplay: flex; gap: 12px;を指定し、3つの.boxを横並びに配置しています。gapで要素同士の間隔を空けられ、flex: 1;を指定した各boxが均等な幅で並ぶ様子も確認できます。

初心者がよくつまずくのが、display: flexを親要素(.box-row)に指定する必要があるという点です。子要素(.box)側に指定しても効果がないため、「どちらの要素に指定すべきか」を意識する必要があります。justify-contentやalign-itemsと組み合わせると、中央揃えや均等配置も簡単に実現できます。

ヘッダーのメニューやカードの並びなど、実際のWebサイトで非常によく使われるテクニックです。モダンなWebデザインのほとんどが、このFlexboxかCSS Gridを土台にレイアウトを組み立てています。