FLEX布局那些事

flex布局体验

建议:
1.如果是PC端页面布局,我们还是传统布局
2.如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex布局

flex布局原理
flex是flexible Box 的缩写,意为"弹性布局",用来为和状模型提供最大的灵活性,任何一个容器都可以指定为flex布局
当我们为父盒子设为flex布局以后,子元素float clear vertical-align 属性将失效.
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex

采用flex布局的元素,称为flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"

总结flex布局原理:
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

flex布局父项常见属性
flex-direction:设置主轴的方向
注意:主轴和测轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴.而我们的子元素是跟着主轴来排列的

justify-content:设置主轴上的子元素排列方式

flex-wrap:设置子元素是否换行
wrap 换行
nowrap 不换行
align-content:设置测轴上的子元素的排列方式(多行)
align-items:设置测轴上的子元素排列方式(单行)

flex-flow:复合属性,相当于同时设置了flex-direction 和 flex-wrap

flex布局子项常见属性
flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）