弹性布局设置方式：

display: flex;

• 弹性布局的方向 默认的row
• row 项目是从左到右排布的
• row-reverse 项目是从右到左排布
• column 项目从上到下排布 竖直
• column-reverse 项目从下到上排布
• flex-direction:row;

---

• 垂直弹性布局方向上的对齐方式
• center: 项目居中对齐
• flex-start 对齐竖直开始位置
• flex-end 对齐竖直结束位置
• stretch 默认的样式 在项目不设置高度的时候 高度和父标签等高
• baseline 第一行文字对齐
• flex-warp 换行
• align-items: baseline;

---

• 弹性布局方向上的对齐方式
• center 居中
• flex-start 项目位于弹性布局方向上开始的位置
• flex-end 项目位于结束的位置
• space-around 间距平分
• space-between 两边贴边 两个项目之间间距相等
• justify-content: center;

弹性布局自动换行