/*DIV进行弹性盒子布局*/
.box{display:flexbox;display: -webkit-flex;display:-ms-flexbox;}

/*横向排列*/
.box-row{flex-direction:row;}           /*（默认值）：主轴为水平方向，起点在左端。*/
.box-row-r{flex-direction:row-reverse;}   /*主轴为水平方向，起点在右端。*/
.box-column{flex-direction:column;}        /*主轴为垂直方向，起点在上沿。*/
.box-column-r{flex-direction:column-reverse;}/*主轴为垂直方向，起点在下沿。*/

.box-nowrap{flex-wrap:nowrap; }          /*（默认值）不换行*/
.box-wrap{flex-wrap:wrap; }            /*换行，第一行在上方。*/
.box-wrap-r{flex-wrap:wrap-reverse; }    /*换行，第一行在下方。*/

.box-align{justify-content: flex-start;}               /*（默认值）：左对齐*/
.box-align-end{justify-content: flex-end;}             /*右对齐*/
.box-align-center{justify-content: center;}            /*居中*/
.box-align-between{justify-content: space-between;}     /*两端对齐，项目之间的间隔都相等。*/
.box-align-around{justify-content: space-around;}      /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/

.box-valign-stretch{align-items:stretch;}       /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
.box-valign-start{align-items:flex-start;}    /*交叉轴的起点对齐。*/
.box-valign-end{align-items:flex-end;}      /*交叉轴的终点对齐。*/
.box-valign-center{align-items:center;}        /*交叉轴的中点对齐。*/
.box-valign-baseline{align-items:baseline;}      /*项目的第一行文字的基线对齐。*/

/*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
.box-valign-item-stretch{align-self:stretch;}       /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
.box-valign-item-start{align-self:flex-start;}    /*交叉轴的起点对齐。*/
.box-valign-item-end{align-self:flex-end;}      /*交叉轴的终点对齐。*/
.box-valign-item-center{align-self:center;}        /*交叉轴的中点对齐。*/
.box-valign-item-baseline{align-self:baseline;}      /*项目的第一行文字的基线对齐。*/

/*单项居右*/
.box-align-item-right{margin-left:auto}


/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
.box-column-align{align-content:stretch;}         /*（默认值）：轴线占满整个交叉轴。*/
.box-column-align{align-content:flex-start;}      /*与交叉轴的起点对齐。*/
.box-column-align{align-content:flex-end;}        /*与交叉轴的终点对齐。*/
.box-column-align{align-content:center;}          /*与交叉轴的中点对齐。*/
.box-column-align{align-content:space-between;}   /*与交叉轴两端对齐，轴线之间的间隔平均分布。*/
.box-column-align{align-content:space-around;}    /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/


/*flex-grow它将相对于同一行上所有其他Flex项目的大小的总和进行缩放。*/
.box-f1 {flex-grow: 1;}
.box-f2 {flex-grow: 2;}
.box-f3 {flex-grow: 3;}
.box-f4 {flex-grow: 4;}
.box-f5 {flex-grow: 5;}
.box-f6 {flex-grow: 6;}
.box-f7 {flex-grow: 7;}
.box-f8 {flex-grow: 8;}
.box-f9 {flex-grow: 9;}

/*box-flex属性指定box的子元素是否灵活或固定的大小。*/
.box-b1{-moz-box-flex:1;-webkit-box-flex: 1;-ms-flex:1;box-flex: 1;}
.box-b2{-moz-box-flex:2;-webkit-box-flex: 2;-ms-flex:2;box-flex: 2;}
.box-b3{-moz-box-flex:3;-webkit-box-flex: 3;-ms-flex:3;box-flex: 3;}
.box-b4{-moz-box-flex:4;-webkit-box-flex: 4;-ms-flex:4;box-flex: 4;}
.box-b5{-moz-box-flex:5;-webkit-box-flex: 5;-ms-flex:5;box-flex: 5;}

/*用来指定父容器空间不够时子元素的缩小比例，默认为1。如果一个 flexbox 项目的 flex-shrink 属性为0，则该元素不会被压缩。*/
.box-shrink-0 {flex-shrink:0} 
.box-shrink-1 {flex-shrink:1}
.box-shrink-2 {flex-shrink:2}
.box-shrink-3 {flex-shrink:3}