視覺化 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-* - 在項目之間分配空間
