CSS3 弹性布局 flex

采用flex布局的元素称为flex容器  flex容器默认存在两根轴：水平的主轴 和 垂直的交叉轴

----flex的6种属性

flex-direction flex-wrap flex-flow justify-content align-items align-content

flex-direction 决定主轴方向  row | row-reverse | column | column-reverse  默认row 主轴水平方向从左至右  column 主轴垂直方向从上至下

flex-wrap 一条轴线放不下时换行操作 nowrap | wrap | wrap-reverse  默认nowrap不换行 wrap换行且第一行在上方 wrap-reverse换行且第一行在下方

flex-flow 是flex-direction和flex-wrap的简写

justify-content 在主轴方向上的对齐方式 flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐 | space-around元素两侧间隔相等 | space-evenly每个间隙距离相等

align-items 在交叉轴方向上的对齐方式 flex-start | flex-end | center | baseline | stretch

align-content 定义多根轴线的对齐方式 flex-start | flex-end | center | space-between | space-around | stretch

----项目的属性

order 定义项目的排列顺序 数值越小 排列越靠前 默认为0

flex-grow 定义项目的放大比例 默认为0 如果所有项目的flex-grow都为1 则等分剩余空间 如果某个项目的flex-grow为2 其他的都为1 则前者占据剩余空间将比其他项多一倍

flex-shrink 定义了项目的缩小比例 默认为1 即如果空间不足 则该项目将缩小

flex-basis 定义了在分配多余空间之前 项目占据的主轴空间 默认auto

flex 是flex-grow flex-shrink和flex-basis的简写 默认0 1 auto 该属性有2个快捷值 auto(1 1 auto)和none(0 0 auto)

align-self 允许单个项目有与其他项目不一样的对齐方式