1 定义弹性盒（弹性盒属性写在父元素）

display:flex

2 确定主轴方向

flex-direction:row-左右/column-上下 reverse反向

flex-direction:column-reverse; 项目从下到上放置

flex-direction:row-reverse;项目与文本方向相反放置

justify-content：center; 项目在容器的中心对齐

justify-content: flex-end; 项目与容器的右侧对齐

justify-content: flex-start; 项目与容器的左侧对齐

justify-content: space-between; 项目以相等的间距显示一个盒子去左边一个盒子右边

justify-content: space-around; 项目显示周围等间距

align-items:center; 项目在容器的垂直中心对齐

align-items: flex-start; 项目与容器顶部对齐

align-items: flex-end; 项目与容器底部对齐

换行

align-content：space-between;元素位于各行之间留有空白的容器内

align-content: space-around; 元素位于各行之前、之间、之后都留有空白的容器内

align-content: flex-start; 元素位于容器的开头

align-content: flex-end; 元素位于容器的结尾

align-content: center; 元素位于容器的中心

/nowrap; wrap 换行