Flex布局学习

flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。

设置容器的属性有：
display:flex;
flex-direction:row（默认值） | row-reverse | column |column-reverse
flex-wrap:nowrap（默认值） | wrap | wrap-reverse
justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
align-items:stretch（默认值） | center  | flex-end | baseline | flex-start
align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

设置项目的属性有：
order:0（默认值） | <integer>
flex-shrink:1（默认值） | <number>
flex-grow:0（默认值） | <number>
flex-basis:auto（默认值） | <length>
flex:none | auto | @flex-grow @flex-shrink @flex-basis
align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch