Flexboxは、Webレイアウトの基礎を支える仕組みです。
入門編では display: flex や flex-direction を学びましたが、実務では 配置調整・伸縮・並び替え など、より多彩なプロパティを組み合わせて使います。
この記事では、Flexboxの主要プロパティを深掘りし、現在の使い方に合った実践パターンを紹介します。
1. 配置を制御するプロパティ
justify-content：主軸方向の揃え方- 例：ナビゲーションメニューを左右均等に配置
align-items：交差軸方向の揃え方- 例：カードレイアウトで高さを揃える
align-content：複数行の揃え方- 例：折り返した要素を上下中央に配置
2. 子要素の伸縮を制御するプロパティ
flex-grow：空きスペースをどれだけ広げるか- 例：ボタンを均等に伸ばして横幅を揃える
flex-shrink：縮む割合を指定- 例：画面幅が狭いときに要素を縮めて収める
flex-basis：基本サイズを指定- 例：カードの最小幅を設定してレイアウトを安定させる
flex（ショートハンド）- 例：
flex: 1で均等に伸縮する要素を作る
3. 並び順や個別調整
order：要素の並び順を変更- 例：モバイル表示で順序を入れ替える
align-self：個別要素の揃え方を指定- 例：特定のボタンだけ中央揃えにする
4. 実践パターン例
- レスポンシブナビゲーション：
justify-content: space-betweenで左右に配置 - カードグリッド：
flex-wrap: wrapとalign-content: centerで整列 - 均等ボタン配置：
flex: 1を使って横幅を揃える - 順序入れ替え：
orderを使ってモバイル時に並び替え
Flexboxは、単なる「横並び」ではなく、柔軟なレイアウト全般を支える仕組みです。
入門編と応用編を組み合わせることで、初心者でも実務に耐えうるレイアウト設計が可能になります。