移动端flex布局
1.flex（ flexible box ）弹性布局（重点）
1.优点
1.flex布局是一种提倡的布局模型
2.使布局更加灵活，更加简单
3.避免浮动带来拖标的问题
4.行内块的间隙问题
5.适合结构化布局
2.设置的方式
再父项添加display：flex属性 （子元素会默认自动挤压不换行 宽高可以设置）
3.flex的组成部分
1.弹性容器（父项）
2弹性盒子（子项）
3.主轴（默认X轴）
4.侧轴（默认Y轴）
4.flex的主轴对齐方式justify-content
1.定义
属性定义是子项在主轴的对齐方式
2.属性值
1.justityfy-coontent：flex-start；
属性值添加在父项，默认子项左对齐
2.justityfy-coontent：flex-end；
子项右对齐
3.justify-content: center;
子项居中对齐
4 justify-content: space-between;
子项先两边贴紧，再平分中间间隙
5.justify-content: space-evenly;
子项的间隙一样大
6.justify-content: space-around;
子项两侧存在间隙，两者间的间隙叠加，两侧小于中间间隙
5.flex的侧轴对齐方式 align-items （单行情况下）
1.属性值
-
align-items: flex-start; 默认侧轴上对齐
2.align-items: flex-end; 侧轴下对齐
3.align-items: center; 侧轴居中对齐
6.flex的侧轴的多行对齐align-content（多行）
1.属性值
-
align-content: flex-start;侧轴多行对齐
2. align-content: center;侧轴多行居中
3.align-content: flex-end;侧轴多行下对齐
4.align-content: space-between;侧轴多行先贴两边，再中间间隙
- align-content: space-around; 侧轴多行先两侧间隙 再平分中间间隙，中间间隙大于两侧
- align-content: space-evenly;侧轴多行子项间隙都相等
7.子项元素的垂直居中方法
1.如果想让子项元素在水平垂直居中需要主轴侧轴居中
8.flex布局的换行flex-wrap
1.定义
默认情况下子项元素宽度大于父项元素时，子项不会换行，但是会挤压子项元素的宽度，子项如果高度不设置那么默认和父项相同，如果子项换行并且不设置高度，那么子项平分父项高度。
2.属性值
flex-wrap：nowrap； 默认值 默认子项继承父项高度
flex-wrap：wrap； 换行显示
9.设置主轴的方向
1.定义
flex布局中，主轴方向默认为X轴， 侧轴为Y轴
2.属性值
- flex-direction：row从左到右 常用
- row-severse从右到左 很少用
3.column从上到下 常用
4.column-reverse 从下到上 很少用<img src="就业班
10.flex：1；属性值（添加在子项上）
1.定义
父项盒子中子项宽度默认由内容撑开，flex：1的子项盒子内容将会占满父项剩余的宽度（除去其他子项盒子宽度，内边距，外边距）。
