Flexboxとは

要素を横並びや縦並びに配置するための仕組みです。親要素に flex を付けることで、子要素が並びます。Webレイアウトの中心的な道具です。

並べる方向と配置

flex-row（横並び）flex-col（縦並び）で方向を決め、justify-center justify-between などで主軸方向の配置、items-center などで交差軸方向の配置を指定します。この2つを混同しやすいので、実際に値を変えて動きを確かめてください。

間隔と折り返し

要素間の間隔は gap-4 のように指定します。画面が狭いときに折り返したい場合は flex-wrap を使います。この回は分量が多いので、手を動かしながら進めてください。

• flex の基本
• 主軸方向の配置（justify-）
• 交差軸方向の配置（items-）
• 折り返しと間隔