新版语法
定义容器的display属性
.box{ display: -webkit-flex; /webkit/ display: flex;}
行内flex
.box{ display: -webkit-inline-flex; /webkit/ display:inline-flex;}
容器样式
flex-direction: row | row-reverse | column | column-reverse;
主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上flex-wrap: nowrap | wrap | wrap-reverse;
换行：不换行（默认） | 换行 | 换行并第一行在下方flex-flow: <flex-direction> || <flex-wrap>;
主轴方向和换行简写justify-content: flex-start | flex-end | center | space-between | space-around;
主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布align-items: flex-start | flex-end | center | baseline | stretch;
交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）align-content: flex-start | flex-end | center | space-between | space-around | stretch;
多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 左右对齐并铺满 | 轴线占满整个交叉轴。（默认）
子元素属性
order: <integer>;
排序：数值越小，越排前，默认为0flex-grow: <number>; /* default 0 */
放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）flex-shrink: <number>; /* default 1 */
缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。）flex-basis: <length> | auto; /* default auto */
固定大小：默认为0，可以设置px值，也可以设置百分比大小flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，align-self: auto | flex-start | flex-end | center | baseline | stretch;
单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满
