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: <flex-direction> || <flex-wrap>;
- 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
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
2.用在子元素上的属性
- order
定义子元素的排列顺序。数值越小，排列越靠前，默认为0。
- align-self
设置子元素在交叉轴上的对齐方式，可以覆盖父容器align-items的设置
align-self: auto | flex-start | flex-end | center | baseline | stretch;
- 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
