flexコンテナとアイテムを視覚化して、子要素がflexコンテナ内でどのように配置されるかを明確に確認
flexboxプロパティを調整して、さまざまな配置と分散効果を観察
flexアイテムの方向
交差軸に沿ったアイテムの整列
主軸に沿った整列と分布
アイテムが新しい行に折り返すかどうか
交差軸に沿った折り返し行の整列
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretch異なるサイズのアイテムを持つflexコンテナで、flexboxの配置効果を実演
row - アイテムが水平に流れる（左から右へ）row-reverse - アイテムが水平に流れる（右から左へ）column - アイテムが垂直に流れる（上から下へ）column-reverse - アイテムが垂直に流れる（下から上へ）nowrap - アイテムは単一行に留まるwrap - 必要に応じてアイテムが新しい行に折り返すwrap-reverse - アイテムが逆順で新しい行に折り返すflex-start - 交差軸の開始位置にアイテムを配置center - 交差軸の中央にアイテムを配置flex-end - 交差軸の終了位置にアイテムを配置stretch - 交差軸を埋めるようにアイテムを伸縮baseline - ベースラインに沿ってアイテムを配置flex-start - 主軸の開始位置にアイテムをパックcenter - 主軸の中央にアイテムを配置flex-end - 主軸の終了位置にアイテムをパックspace-* - アイテム間にスペースを分散