flex

刚把-webkit-box-的属性过了一下，又说过时了（09年的没定标准以前的写法）。现在已经用flex（12年标准出来后的写法）

学习一下：

1:flex

display:flex 设置容器可以弹性布局

2:flex:value

flex:value相对有同一容器的其他灵活的项目，规定项目的长度

3:flex-grow

flex-grow用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。

在「flex」属性中该值如果被省略则默认为「1」

flex-grow:number/initial/inherit（感觉和flex:value蛮像的,有待深入了解）

参考 http://www.css88.com/book/css/properties/flex/flex-grow.htm

4:flex-shrink

flex-shrink用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」

flex-shrink:number/initial/inherit

参考http://www.css88.com/book/css/properties/flex/flex-shrink.htm

5:flex-basis

用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

(以上参考：http://www.css88.com/book/css/properties/flex/flex.htm)

6:flex-flow:flow-direction flow-wrap

flex-direction:定义弹性盒模型对象子元素的排列方向

flex-direction:row/column/row-reverse/column-reverse

flex:wrap:控制flex容器是单行或是多行（-webkit-box-lines:multiple虽然浏览器有这个属性但是不起什么作用）

flex-wrap:nowarp/wrap/wrap-reverse

7:align-content

align-content:flex-start/flex-end/center/space-between/space-around/stretch

8:align-item

align-item:flex-start/flex-end/center/baseline/stretch

9:align-self

align-self:定义flex子项单独在侧轴（纵轴）方向上的对齐方式

align-self:auto/flex-start/flex-end/center/baseline/stretch

10:justify-content

justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

justify-content:flex-start/flex-end/center/space-between/space-around

11:order

order:设置或检索弹性盒模型对象的子元素出现的顺序数值越小排在前面，数值可以为负值