flex布局

flex布局：

.container { // 容器 view %100 height 自适应
display：flex；
flex-direction： *决定主轴是横向还是纵向

column
列
row
行
column-reverse
列反向row-reverse
行反向

justify-content： // 内容在容器内展示的位置. *主轴上的对齐方式

flex-start
以起始位置分布
flex-end以结束位置分布
center
居中分布space-between
平均分布space-around
均相等 每个item项目前后距离相等
align-items： // *交叉轴上的对齐方式

flex-start
以起始位置分布
flex-end
以结束位置分布
center
居中分布stretch
延伸
baseline
保证每个元素里面的文字底线（基线）是对齐的 // 不是让子元素对齐,是让子元素里的文字对齐
flex-wrap： // 换行

nowrap
不换行,平均分配（超过屏幕宽度）
wrap
换行