弹性盒子使用技巧

兼容性：ie11+；Webkit 内核的浏览器，必须加上-webkit-前缀。

注：

    设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

    弹性盒子里面的子元素(div)都是iline-flex行内弹性布局

常用属性：

1.flex-direction 属性指定了弹性子元素在父容器中的位置。

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

2.justify-content 属性把弹性项沿着弹性容器的主轴线（main axis）对齐。

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

3.align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

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

4.flex-wrap 属性用于指定弹性盒子的子元素换行方式。

   flex-wrap：nowrap/wrap/wrap-reverse;

弹性子元素属性：

排序：order  用整数值来定义排列顺序，数值小的排在前面。可以为负值。

放置剩余空间：margin-right   弹性子元素上设置了 margin-right: auto; 它将剩余的空间放置在元素的右侧;  

完美居中： margin   设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中;

指定占用空间： flex  

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] || 数字