现代浏览器之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

flex内项目：
    /*调整元素的先后顺序，默认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