Flex布局
看到了两篇关于Flex布局非常棒的文章，是阮一峰前辈写的，清晰明了
容器属性：
.box{
display:flex; //弹性布局
flex-direction:row;
....
}
flex-direction //row（默认，主轴水平从左到右）| row-reverse | column（主轴垂直从上到下）| column-reverse
flex-wrap //nowrap（默认，不换行）| wrap（第一行在上方） | wrap-reverse（第一行在下方）
flex-flow //[ <’flex-direction’> | <’flex-wrap’> ]（默认row nowrap）
justify-content //在主轴上的对齐方式（假设主轴从左到右，默认起点对齐） flex-start | flex-ens | center | space-between | space-around
align-items //在交叉轴的对齐方式（默认stretch，未设置高度将占满整个容器） flex-start | flex-ens | center | stretch | baseline
align-content //多根轴线的对齐方式（默认stretch 轴线占满整个容器） flex-start | flex-ens | center | stretch | space-between | space-around
项目属性：
.item1{
order: 1;
}
.item2{
order: 2;
}
order： <’integer’>; //数值越小，排列越靠前（默认为0）
flex-grow: <’number’>; //项目放大比例（默认为0，表示不放大）
flex-shrink：<’number’>; //项目缩小比例（默认为1，表示若空间不足则缩小）
flex-basis：<’length’> | auto; //项目占据的主轴空间 （默认为auto，即项目本身大小）
flex：none | [ <’flex-grow’> <’flex-shrink’>? | <’flex-basis’> ] （flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选）
align-self：auto | flex-start | flex-end | center | baseline | stretch； //单个项目的对齐方式