/*=======================盒子样式=========================*/
/*      [配置浏览器兼容样式]      */
.box{
    position: relative;
    display: -webkit-flex;
    display: flex;
    flex-shrink: 0;
}
/*子元素垂直对齐*/
.box-ver{ flex-direction:column;}
/*配置浏览器兼容-以反方向显示 div 框的子元素*/
.box-rev{ flex-direction:column-reverse;}
/* 配置box内元素自动换行 */
.box-wrap{ flex-wrap:wrap; }
/* 不压缩 */
.box-noshrink{ flex-shrink: 0; }
/*==================[子元素对齐方式]=====================*/
/*子元素垂直对齐方式-顶部*/
.box-as{ align-items:flex-start; }
/*子元素垂直对齐方式-居中*/
.box-ac{
    align-items: center;
    -webkit-align-items:center;
    -moz-align-items:center;
}
/*子元素垂直对齐方式-尾部*/
.box-ae{ align-items: flex-end; }
/*子元素水平对齐方式-开头,每个子元素之间有间距*/
.box-pj{ justify-content: flex-start; }
/*子元素水平对齐方式-居中*/
.box-pc{
    justify-content: center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
}
/*子元素水平对齐方式-尾部*/
.box-pe{
    justify-content: flex-end;
    -webkit-justify-content:flex-end;
    -moz-justify-content:flex-end;
}
/*==================[定义元素可伸缩大小]===========*/
/*可伸缩为100像素*/
.box-f1{ flex:1; }
.box-wrap{ flex-wrap: wrap; }