flex布局

/*使用flex布局*/
.box{
    displat:flex
}
/*容器的属性*/
.box{
   /*排列方式*/
   flex-diraction :row/row-reverse/column/column-reverse
   /*换行*/
   flex-wrap:nowrap(默认，不换行)/wrap/wrap-reverse(第一行在下)
   /*flex-direction和flex-wrap的简写*/
   flex-flow:row||nowrap
   /*在主轴上的对齐方式*/
   justify-center: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/stretch/space-between/space-around
}
/*容器中项目的属性*/
.item{
    /*项目的排列顺序*/
    order:integer(1,2,3,...)
    /*项目的放大比例，默认为0*/
    flex-grow:number(1,2,3,..)
    /*缩小比例,默认1，在为0时不进行缩小*/
    flex-shrink:number(1,2,3)
    /*项目占据的主轴空间，main size,默认auto*/
    flex-basis:length|auto
    /*flex-grow、flex-shrink、flex-basis简写*/
    flex:1 1 auto(快捷键auto)/0 0 auto(none)
   	/*设置单个项目与其他项目不同的对齐方式*/
    align-self:auto/flex-start/flex-end/center/baseline/stretch
}