《CSS in depth》第五章
flexbox:
在flex样式中，flex子元素的值为auto的外边距代表填充所有可用空间。
flex属性控制弹性子元素在主轴方向上的大小。它是3个属性的简写：flex-basis, flex-grow, flex-shrink. basis定义了元素大小的基准值，可以设置为任意宽度单位，如百分比、px、em. initial值为auto. 如果设置为auto, 浏览器会检查元素是否设置了width, 如有，用width作为basis, 若没有，则使用元素自身的内容的宽度。如果非auto, width会忽略。grow和shrink则用来决定子元素的缩放比例（在basis的基础上）。flex-grow决定各个子元素“瓜分”剩余宽度的百分比。如果为0，则宽度不会超过basis. flex-shrink决定，如果各个子元素宽度之和超出容器宽度，则各个子元素收缩的比例。如果为0，则该元素不会收缩。
flex的默认值：grow 1, shrink 1, basis 0%.
弹性容器的属性：
flex-direction: 默认按row排序。即横向。
flex-wrap: wrap/nowrap/wrap-reverse. 启用之后shrink值就不生效了。
flex-flow: direction和wrap的简写。
justify-content: flex-start/flex-end/center/space-between/space-around.
align-items: 控制子元素在副轴上的位置。flex-start/flex-end/stretch/center/baseline. 默认为stretch, 即水平排列的时候，填满高度。baseline的意思：按第一行文字的基线对齐。
align-content: 开启wrap时控制子元素在副轴上的间距。flex-start/flex-end/stretch/center/space-between/space-around.
弹性元素的属性：
align-self: 控制副轴上的对齐方式。auto为初始值，表示以容器的align-items为准。
order: 控制顺序。默认值是0.
flex布局demo:
