flex布局要求有父元素，子元素，并通过在父元素上设置弹性布局让子元素位置发生变化
主轴与交叉轴由flex-direction属性来确定，该属性的值决定了主轴是哪个方向
flex-direction 设置子元素的排序方式
- row: 行排列
- column: 列排列
- row-reverse: 行倒序排列
- column-reverse: 列倒序排列
justify-content 设置子元素的对齐方式（相对于主轴方向）
- flex-start: 对齐子元素头部方向
- flex-end: 对齐子元素尾部方向
- space-between: 子元素左右对齐，其余元素等距分布（每个元素两侧距离相等）
- space-around: 子元素等距分布（每个元素两侧距离相等）
align-items 设置子元素的对齐方式（相对于交叉轴方向）
- flex-start: 对齐子元素头部方向
- flex-end: 对齐子元素尾部方向
- space-between: 子元素左右对齐，其余元素等距分布（每个元素两侧距离相等）
- space-around: 子元素等距分布（每个元素两侧距离相等）
- stretch: 纵向拉伸子元素（只有在子元素未设置height属性时有效）
- baseline: 子元素内文字底线对齐，以第一个子元素的文字为基准（设置后可能会导致子元素不对齐）