CSS3弹性盒布局总结（二）

昨天发现flex属性的总结（一）里的属性和w3cschool里的flex属性有很多都是重复的功能。今天翻了一篇w3cplus里的一篇文章：戳这里，发现其实是flex语法的两个不同的版本。昨天那个比较老，今天总结的是最新的语法标准。

父元素的属性有：
display:flex 父元素及子元素使用弹性盒布局
flex-directions: 决定主轴的方向 row|row-reverse|column|column-reverse
flex-wrap: 子元素是否换行 nowrap|wrap|wrap-reverse
justify-content:
子元素以垂直于主轴的交叉轴为参照线的对齐方式 （默认主轴为水平方向）
flex-start|center|flex-end|space-between|space-around
align-item:
子元素以主轴为参照线的对齐方式
flex-start|center|flex-end|baseline|strentch
align-content:
多行子元素以主轴为参照线的对齐方式
flex-start | flex-end | center | space-between | space-around | stretch

子元素的属性有：
order: 子元素自己的排列顺序 默认为0 数值越小排列越靠前
flex-grow: 子元素的放大比例 无单位，默认为 0 有空间 不放大
flex-shrink: 子元素的缩小比例 无单位，默认为1 没空间 就缩小 如果为0 表示没空间 不缩小’
flex-basis: 子元素占据主轴的初始空间 默认为auto 即项目本来大小 可带单位
flex 是flex-grow|flex-shrink|flex-basis 的缩写 auto（1 1 auto） none（0 0 auto）
align-self: 子元素以主轴为参照线的对齐方式
auto|flex-start|center|flex-end|baseline|strentch