CSS Flexboxの使い方 — justify-content・align-items・flex-wrapの完全ガイド
CSS Flexbox（Flexible Box Layout）は1次元のレイアウトシステムで、要素を横または縦に並べて柔軟に配置できます。floatやtable-cellによる旧来の手法を置き換え、レスポンシブデザインの中心的な技術となっています。
flex-directionとflex-wrapの基本
flex-directionはフレックスアイテムの並ぶ方向を指定します。row（横並び・デフォルト）・row-reverse（逆順横）・column（縦並び）・column-reverse（逆順縦）の4つがあります。flex-wrapはアイテムがコンテナをはみ出したときの折り返しを制御し、nowrap（折り返しなし）・wrap（折り返しあり）・wrap-reverse（逆順折り返し）を指定できます。
justify-contentとalign-itemsの違い
justify-contentはメイン軸（flex-directionの方向）のアイテム配置を制御します。flex-start・flex-end・center・space-between・space-around・space-evenlyが使えます。align-itemsはクロス軸（メイン軸と垂直）の配置を制御し、stretch（デフォルト）・flex-start・flex-end・center・baselineが選べます。
flex-grow・flex-shrink・flex-basisとは
flex-growはアイテムがコンテナの余白をどれだけ分け合うかを指定します。全アイテムにflex-grow: 1を指定すると等幅になります。flex-shrinkはコンテナが不足したときの縮小割合、flex-basisはアイテムの基本サイズを指定します。省略記法flex: 1 1 autoが一般的です。
よくあるFlexboxパターン
水平中央寄せはdisplay: flex; justify-content: center; align-items: center; で実現できます。ナビゲーションバーのロゴ左・メニュー右はjustify-content: space-between、フッターを画面下に固定するSticky FooterはminHeight: 100vh + flex-direction: column + margin-top: auto（コンテンツ）で実装できます。