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,属性值越小,越靠前