flex布局总结

1，flex布局体验
1.1 传统布局与flex布局
传统布局（1，兼容性好。2，布局繁琐。3，局限性，不能在移动过端中有很好的布局）
flex弹性布局（1，操作方便，布局极为简单，移动端应用很广泛。2，pc端浏览器支持情况较差。3，IE11或更低版本，不支持或部分支持）
建议：
1：如果是PC端页面布局，我们还是传统布局。
2：如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
2.1，布局原理
flex是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
1：当我们为父盒子为flex布局以后，子元素的float，clear和verti-align属性将失效。
2：伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。
3.1 常见的父项属性
以下由6个属性是对父元素设置的
1：flex-direction: 设置主轴的方向
2：justify-content：设置主轴上的元素排列方式
3：flex-wrap：设置子元素是否换行
4：align-content：设置侧轴上子元素排列方式（多行）
5：align-items：设置侧轴上子元素的排列方式（单行）
6：flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
3.2 flex-direction 设置主轴的方向
1：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴
A：默认主轴方向就是X轴方向，水平向右
B：默认侧轴就是Y轴方向，水平向下
2：flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就是看flex-direction设置谁为主轴，剩下就是侧轴
A：row —默认值从左到右
B： row-reverse 从右到左
C：column–从上到下
D：column-reverse–从下到上
3.3justify-content设置主轴上的子元素排列方式
justfiy-content属性定义了项目在主轴上对齐方式
注意：使用了这个属性之前一定要确定好主轴是哪个
A：flex-start 默认值从头部开始，如果主轴是X轴，则从左到右
B：flex-end 从尾部开始排列
C：center 在主轴居中对齐（如果主轴是X轴则水平居中）
D：space-around 平分剩余空间
F：space-bettween 先两边贴边，再平分剩余空间（重要）