flex布局原理特点及实现方式

flex布局特点
1、移动端应用比较广发
2、pc端浏览器支持比较差
3、IE11以下部分支持
4、flex布局相对比较简便，可以通过少量代码实现一些盒子布局
flex布局原理
通过给父盒子添加flex属性，来操作子盒子的布局。
父盒子变成了一个容器，而子盒子就是一个个flex-item(项目)
flex父盒子属性
1、设置主轴方向：flex-direction
默认属性值是：row,从左向右
column：从上到下
2、设置主轴上的子元素的排列方法： justify-content
默认是：flex-start,从头开始排列
flex-end：从尾部开始排列，顺序不变
center：主轴居中对齐
space-around：平分剩余空间

space-between：先两端对齐，在平分剩余空间
3、 flex-wrap，是否换行
默认：nowrap，不换行，只是缩小子元素的大小
wrap：换行
4、align-items,设置侧轴的子元素排列方法，属性和justify-content一样。
结合justify-content设置垂直居中
注：其只能在子元素为单行时使用。
5、align-content，适用于多行
6、flex-flow，两个属性值，第一个表示哪个为主轴，第二个表示是否换行
flex子盒子属性
1、flex,定义子项目占多少份空间，属性值为number
是占剩余空间多少份
2、align-self操作单一子元素，在侧轴的排序方式
3、order：操作单一子元素位置，属性值为number，属性值越小，越靠前