现代浏览器之Flex布局
flex布局：
display:flex;
/*默认row*/
flex-direction:row|row-reverse|column|column-reverse|initial|inherit;
/*放不下，如何换行,默认 nowrap*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*对齐方式-垂直--水平（cloumn）*/
align-items:
/*对齐方式-水平--垂直（cloumn）*/
-webkit-justify-content:flex-start|flex-end|center|space-between|space-around
/*调整元素的先后顺序，默认0*/
order: <integer>;
flex-grow: <number>; /* 放大倍率，default 0 不放大，数值越大放大越厉害*/
flex-shrink: <number>; /*缩小倍率 default 1 */
flex-basis: <length> | auto; /* default auto */
/*重新制定内部元素的对齐方式*/
align-self: auto | flex-start | flex-end | center | baseline | stretch