flex弹性布局

flex布局

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或支持部分

原理：
1.当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效
2.flex用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
3.采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，成翻了下项目
4.通过给父盒子添加flex属性，来控制盒子的位置和排列方式

父项常见属性

设置主轴方向(flex-direction)

默认主轴方向是x轴方向，水平向右
默认测轴方向是y轴方向，水平向下
row   默认从左向右
row-reverse  从右到左
column  从上到下
column-reverse  从下到上

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

flex-start     如是x轴，则从左到右
flex-end     从尾部到开始
center   在主轴居中对齐
space-around   平分剩余空间
space-between  先两边贴边，再平分剩余空间

设置是否换行(flex-wrap)

nowrap  不换行
wrap   换行

设置测轴上的子元素的排列方式单行（align-items）

flex-start  从头部开始
flex-end   从尾部开始
center   居中显示
strech   拉伸

设置测轴上的子元素的排列方式多行(align-content)

flex-start   默认从头到尾排列
flex-end  从尾部到头部排列
center   居中显示
space-around    平分剩余空间
space-between 先分布两头，再平分剩余空间
stretch   拉伸

align-content和align-items区别

单行找align-items
多行找align-content

flex-flow复合属性(设置主轴和换行)

flex-flow:row  wrap

子项常见属性

flex属性

定义子项目分配剩余空间，用flex表示占多少份数
flex: <number>；可以跟百分比

align-self可以控制子项自己在测轴上的排列方式

允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性
align-self : flex-end

order属性定义项目排列顺序

数值越小，排列越靠前，默认为
order:number