可视化 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-* - 在项目之间分配空间