CSS3 弹性盒子(Flex Box)

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
一.容器属性
flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse

justify-content:弹性项沿着弹性容器的主轴线（横轴X）对齐
justify-content: flex-start | flex-end | center | space-between | space-around

align-items:设置或检索弹性盒子元素在侧轴（纵轴y）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch

flex-wrap:属性用于指定弹性盒子的子元素换行方式。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch

二.项目属性
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。可覆盖align-items属性。
align-self: auto | flex-start | flex-end | center | baseline | stretch

flex 属性用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

order 属性设置弹性容器内弹性子元素的属性:
order:：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

flex-grow 默认为0；属性用于设置项目的放大比例（分配剩余空间）；所有项目的flex-grow：1，则它们将等分剩余空间
flex-grow: ;

flex-shrink 默认为1，属性用于设置项目的缩小比例（处理溢出空间）；一个项目的flex-shrink：0，则空间不足时，该项目不缩小
flex-shrink: ;

flex-basis 默认值：auto，属性定义了分配多余空间之前，项目占据的主轴空间；
浏览器根据这个属性，计算主轴是否有多余空间。
flex-basis属性设置固定值（例如：350px），则项目将占据固定空间。(类似定宽度)
flex-basis: | auto;