1.用在父容器上的属性

- flex-direction

设置容器的子元素的排列方向

flex-direction: row | row-reverse | column | column-reverse;

- flex-wrap

设置弹性盒模型对象的子元素超出父容器时是否换行，如何换行

flex-wrap: nowrap | wrap | wrap-reverse;

- flex-flow

flex-direction 和 flex-wrap 的缩写，默认值row nowrap

flex-flow: || ;

- justify-content

设置子元素在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

- align-items

设置子元素在交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

- align-content

2.用在子元素上的属性

- order

定义子元素的排列顺序。数值越小，排列越靠前，默认为0。

- align-self

设置子元素在交叉轴上的对齐方式，可以覆盖父容器align-items的设置

- flex-basis

flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。

item1，flex-basis 默认是auto，则使用width的宽度，没有指定宽度，width为auto，所以宽度由内容决定；
item2，flex-basis 为auto，则使用width的宽度，指定width 为70px，所以宽度是70px；
item3，flex-basis 为100px，覆盖width 的宽度，所以宽度是100px。

- flex-grow

用来“瓜分”父容器“剩余空间”。

容器的宽度为400px
item1的占用的基础空间(flex-basis)为50px
item2占用的基础空间是70px
item3占用基础空间是100px，
剩余空间为 400-50-70-100 = 180px。

item1，flex-grow默认为0；
item2，flex-grow为2；
item3，flex-grow为1。

剩余空间被分成3份；每一份是180/(1+2)=60px;
item2分得其中的两份，所以真实的占用空间为(70+60*2)=190px;
item3分得其中的一份，所以真实的占用空间为(100+60)=160px;

- flex-shrink

用来“吸收”超出的空间

容器的宽度为400px
item1的占用的基础空间为250px
item2占用的基础空间是150px
item3占用基础空间是100px，
超出的空间为100px；

item1，flex-shrink默认为1；
需要吸收的空间为(250 * 1)/(250 * 1+150 * 2+100 * 2) * 100 = 33.33px，
所以真实占用空间为(250-33.33)=216.67px

item2，flex-shrink为2；
需要吸收的空间为(150 * 2)/(250 * 1+150 * 2+100 * 2) * 100=40px，
所以真实占用空间为(150-40)=110px；

item3，flex-shrink为2；
需要吸收的空间为(100 * 2)/(250 * 1+150 * 2+100 * 2) * 100=26.67pxpx，
所以真实占用空间为(100-26.67)=73.33px；

- flex

flex-grow, flex-shrink,flex-basis 的缩写，默认值为0 1 auto

flex布局