Flexboxでレイアウトを組む基礎
Flexboxは要素を横ならびや縦ならびにしたり中央ぞろえにしたりするレイアウト方法です。従来のfloatより直感的に書けるためナビゲーションメニューやカード一覧などでよく使われています。親要素にdisplayをflexで指定するだけで子要素の並び方を柔軟に制御できます。
ナビゲーションメニューに使ってみる
ヘッダーロゴと右側に横ならびのメニューというよくあるレイアウトはFlexboxの得意分野です。ロゴとナビゲーションのコンテナを作りnav内のリンクをflexで横一列に並べればシンプルなメニューが作れます。
See the Pen Flexboxでレイアウトを組む基礎 by Syo Yanai (@h1-tech-japan) on CodePen.
カードレイアウトにも活用できる
サービス紹介やブログ一覧などのカードレイアウトにもFlexboxは便利です。幅を指定したボックスをならべgapですき間を調整するとすっきりとした一覧が簡単に作れます。慣れてきたらメディアクエリと組み合わせて画面幅に応じた段数の変更にもチャレンジしてみましょう。