flex弹性布局总结

1.当父元素设为flex布局以后，子元素的float和vertical-align属性将失效

2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

父级   flex容器
子元素 flex项目
常见的父项属性  
flex-direction:设置主轴方向
主轴：x轴方向，水平向右
侧轴：y轴方向，水平向下
元素是跟主轴来排列的
row                      默认值从左到右
row-reverse        从右到左
column               从上到下
column-reverse  从下到上

justify-content:设置主轴上的子元素排列方式
flex-start     默认值从头部开始 如果主轴是x轴，则从左到右
flex-end     从尾部开始排列
center       在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）

flex-wrap:设置元素是否换行  （默认不换行）
nowrap 默认值，不换行
wrap     换行

align-content:设置侧轴上的子元素排列方式（多行）（在单行情况下没有作用）
flex-start   从上到下
flex-end     从下到上
center       挤在一起居中（垂直居中）
stretch      拉伸(默认值)
align-items:设置侧轴上的子元素排列方式（单行）
flex-start   从上到下（默认值）
flex-end     从下到上
center       挤在一起居中（垂直居中）
stretch      拉伸
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex布局子项常见属性
flex        子项目占的份数
align-self  控制子项自己在侧轴的排列方式
align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order       属性定义子项的排列顺序（前后顺序）
数字越小越靠前，默认为0 和z-index不一样
flex属性  flex:number;
flex属性定义子项目分配剩余空间，用flex来表示占多少份数