flex布局
一.flex是什么
1. 弹性盒子布局
2. 是一种由浏览器提倡的布局模型
3.用来为盒状模型提供最大的灵活性
4.任何一个容器都可以指定为Flex布局
.box{ display: flex;
}二.为什么使用flex
1.解决元素居中问题
2.自动弹性伸缩，合适适配不同大小的屏幕，移动端和微信小程序，app
三.常用属性
1.弹性容器（父）常用属性
1.flex-direction 设置主轴方向 (常用)
2.justify-content 设置主轴上的对齐方式 (常用)
3.align-items 设置项目在交叉轴上的对齐方式（常用）
1.flex-direction ：设置主轴方向
1.row（默认值）：从左向右横向排列
2.row-reverse：从右向左横向排列
3.column：自上而下纵向排列
4.column-reverse：自下而上纵向排列 flex-direction ：row 从左下右横向排列
flex-direction ：row-reverse 从右向左横向排列
colflex-direction ：column 自上而下纵向排列
colflex-direction ：column-reverse 自下而上纵向排列
2.justify-content 设置主轴上的对齐方式
主轴方向根据flex-direction的值设置,默认为横轴
1. center 靠着主轴居中对齐//一般就是居中对齐
2.space-between 两端对齐，靠着容器壁，剩余空间平分
3.space-around 项目之间距离相等
4.space-evenly 间隙相等
5.flex-start 默认值，表示项目对齐到主轴起点，项目间不留空隙（一般是左方向）
6.flex-end 项目对齐到主轴终点，项目不留空隙（一般是右方向）
justify-content：center 居中对齐
justify-content：sapce-betweem 两端对齐
justify-content：sapce-around 项目之间距离相等
justify-content：sapce-evenly 间隙相等
justify-content：flex-start 默认值，表示项目对齐到主轴起点，项目间不留空隙（一般是左方向）
justify-content：end 项目对齐到主轴终点，项目不留空隙（一般是右方向）
3.align-items 侧轴元素对齐方式//单行
默认是x轴,交叉轴为纵轴,如果设置主轴为y轴,那么交叉轴就是x轴
1.center：侧轴的中点对齐。
2.baseline: 项目的第一行文字的基线对齐。
3.flex-start；项目顶部与交叉轴起点对齐
4.flex-end；项目底部与交叉轴终点对齐align-items：center 侧轴的中点对齐
align-items：baseline 基于第一行文字对齐
align-items：flex-start 项目顶部与交叉轴起点对齐
