flex布局
传统布局：
- 兼容性号
- 布局繁琐
- 局限性，不能在移动端很好的布局
flex布局：
- 操作简单，布局极为简单
- PC端浏览器支持情况较差
- IE11或更低版本不支持
如何选择：
1、如果是PC端页面布局，选择传统布局
2、移动端或者是不考虑兼容性问题的PC端网页布局，考虑使用flex布局
1、flex布局原理
1、flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
2、当我们为父盒子设置flex布局以后，子元素的float、clear和vertical-align失效
3、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
4、采用flex布局的元素，称为flex容器，简称容器，它的所有子元素自动成容器成员，称为flex项目，简称“项目”
总结：flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2、flex-direction
决定主轴方向（项目的排列方向）
flex-direction: row //默认：从左到右
flex-direction: row-reverse; //从右到左
flex-direction: column-reverse;//从下到上
flex-direction: column;//从上到下
3、justify-content
定义了项目在主轴方向上的对齐方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HICQwLsa-1610072790973)(C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\1609085073819.png)]
4、flex-wrap
设置子元素是否换行
默认情况下，项目都排在一条线（轴线），flex-wrap属性定义，flex布局中默认是不换行的。
属性值：
nowrap：默认值，不换行；wrap：换行
5、align-item
控制子项在侧轴（默认是y轴）
子项为单行的时候使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZrAGstn-1610072790976)(C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\1609086284077.png)]
6、align-content
设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下没有效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tleb70Vj-1610072790978)(C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\1609162514542.png)]
7、align-item与align-content的区别
- align-items适用于单行情况，只有上对齐、下对其、居中和拉伸
- align-content适用于换行（多行）的情况，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性。
- 单行找align-items,多行找align-content
8、flex-flow
flex-flow属性是flex-direction和flex-wrap属性的符合属性
flex-flow:row nowrap;
9、flex设置子项的份数
flex属性定义子项目分配父盒子的剩余空间，用flex来标识占多少份。
属性是述职，数字为1，标识占总分数中的一份，默认为0.
div{
flex: 1;
}
10、子项的align-self和order属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
div:nth-child(1){
align-self: flex-end;
}
order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0。