flexBox布局设置常用样式

.row {
/*横*/
display: -webkit-box;
display: -webkit-flex;
/* Safari */
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.row-wrap {
/*横不换行*/
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
/*列*/
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
width: 100%;
}
.col-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 10%;
-moz-box-flex: 0;
-moz-flex: 0 0 10%;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}

.col-20 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-moz-box-flex: 0;
-moz-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}

.col-25 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-moz-box-flex: 0;
-moz-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}

.col-33, .col-34 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3333%;
-moz-box-flex: 0;
-moz-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}

.col-50 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-moz-box-flex: 0;
-moz-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}

.col-66, .col-67 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.6666%;
-moz-box-flex: 0;
-moz-flex: 0 0 66.6666%;
-ms-flex: 0 0 66.6666%;
flex: 0 0 66.6666%;
max-width: 66.6666%;
}

.col-75 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-moz-box-flex: 0;
-moz-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}

.col-80 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 80%;
-moz-box-flex: 0;
-moz-flex: 0 0 80%;
-ms-flex: 0 0 80%;
flex: 0 0 80%;
max-width: 80%;
}

.col-90 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 90%;
-moz-box-flex: 0;
-moz-flex: 0 0 90%;
-ms-flex: 0 0 90%;
flex: 0 0 90%;
max-width: 90%;
}
div {
margin-bottom: 20px;
height: 100px !important;
width: auto;
color: #fff;
font-size: 18px;
font-weight: bold;
}

.bg-r {
background: red;
}
.bg-b {
background: black;
}
.bg-y {
background: yellow;
}
.bg-g {
background: green;
}
.bg-o {
background: orange;
}
.bg-p {
background: pink;
}