/**flex 兼容写法 定义flex布局**/
.dis-flex {
    display: flex;
    display: -webkit-flex;
    /* display: -webkit-box; */
 }
 
 /**flex 兼容写法 垂直居中**/
 .flex-vertical-center {
    align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
 }
 
 /**flex 兼容写法 垂直居上**/
 .flex-vertical-start {
    align-items: flex-start;
    -o-align-items: flex-start;
    -ms-align-items: flex-start;
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: start;
 }
 
 /**flex 兼容写法 垂直居下**/
 .flex-vertical-end {
    align-items: flex-end;
    -o-align-items: flex-end;
    -ms-align-items: flex-end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    -webkit-box-align: end;
 }
 
 /**flex 兼容写法 水平居中**/
 .flex-horizontal-center {
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
 }
 
 /**flex 兼容写法 水平居左**/
 .flex-horizontal-start {
    justify-content: flex-start;
    -o-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -webkit-box-pack: start;
 }
 
 /**flex 兼容写法 水平居右**/
 .flex-horizontal-end {
    justify-content: flex-end;
    -o-justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -webkit-box-pack: end;
 }
 
 /**flex 兼容写法 水平居两边**/
 .flex-horizontal-between {
    justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
 }
 
 /**flex 兼容写法 纵向排列**/
 .flex-column {
    flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
 }
 
 /**flex 兼容写法 子元素纵向换行**/
 .flex-vw {
    /*-webkit-box-lines: multiple;*/
    flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
 }
 
 /**flex 兼容写法 子元素纵向换行**/
 .flex-nvw {
    /*-webkit-box-lines: multiple;*/
    flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    box-lines: single;
    -webkit-box-lines: single;
 }
 
 /**flex 兼容写法 子元素不填充剩余位置**/
 .flex-0 {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto; /* IE 10 */
    -webkit-flex: 0 1 auto; /* Chrome */
    box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto; /* Firefox */
    -webkit-box-flex: 0 1 auto; /* Safari 和 Chrome */
 }
 
 /**flex 兼容写法 子元素填充剩余位置**/
 .flex-1 {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto; /* IE 10 */
    -webkit-flex: 1 1 auto; /* Chrome */
    box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto; /* Firefox */
    -webkit-box-flex: 1 1 auto; /* Safari 和 Chrome */
 }