Webデザインでよく使われる Flexbox（フレックスボックス） は、要素を柔軟に並べるための仕組みです。
従来の float や table レイアウトよりも直感的で、初心者でも扱いやすいのが特徴です。
この記事では、現在の使い方に合った基本プロパティを整理して紹介します。
1. Flexboxの基本
display: flex：親要素を「Flexコンテナ」にする指定flex-direction：並び方向を決める（row,columnなど）
2. 配置を整えるプロパティ
justify-content：横方向（主軸）の揃え方flex-start,flex-end,center,space-between,space-around,space-evenly
align-items：縦方向（交差軸）の揃え方stretch（初期値）,flex-start,flex-end,center,baseline
flex-wrap：要素を折り返すかどうかnowrap（初期値）,wrap,wrap-reverse
3. 子要素に使うプロパティ
flex-grow：空きスペースをどれだけ広げるかflex-shrink：縮む割合を指定flex-basis：基本サイズを指定flex（ショートハンド）：flex-grow flex-shrink flex-basisをまとめて指定order：並び順を変更align-self：個別の要素だけ縦方向の揃え方を変える
Flexboxは、「横並び」だけでなく柔軟なレイアウト全般に使える強力な仕組みです。
初心者はまず display: flex と justify-content を試し、慣れてきたら flex ショートハンドや order を活用すると理解が深まります。