Flex布局

定义容器的display属性

.box{
    display: -webkit-flex;
    dispaly: flex;
}
/*行内样式*/
.box{
    display: -webkit-inline-flex;
    display: inline-flex;
}

容器样式

主轴方向（flex-direction）

属性值	属性的含义
row	左到右（默认）
row-reverse	右到左
column	上到下
column-reverse	下到上

换行（flex-wrap）

属性值	属性的含义
nowrap	不换行（默认）
wrap	换行
wrap-reverse	换行并第一行在下方

主轴方向和换行简写

flew-flow:||

主轴对齐方式（justify-content）

属性值	属性的含义
flex-start	左对齐（默认）
flex-end	右对齐
center	居中对齐
space-between	两端对齐
space-around	平均分布

交叉轴对齐方式（align-items）

属性值	属性的含义
flex-start	顶部对齐
flex-end	底部对齐
center	居中对齐
baseline	文本基线对齐
stretch	如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）

子元素属性

排序（order：）：排序，数值越小，越排前，默认为0

放大（flex-grow: ）：放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）

缩小（flex-shrink:）：缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

固定大小（flex-basis: | 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	上下对齐并铺满