CSS语义flex栅格

flex布局

 

col-30/col-80

 

/**/
.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-15 {-webkit-box-flex: 0;-webkit-flex: 0 0 15%;-moz-box-flex: 0;-moz-flex: 0 0 15%;-ms-flex: 0 0 15%;flex: 0 0 15%;max-width: 15%;
}.col-30 {-webkit-box-flex: 0;-webkit-flex: 0 0 30%;-moz-box-flex: 0;-moz-flex: 0 0 30%;-ms-flex: 0 0 30%;flex: 0 0 30%;max-width: 30%;
}.col-35 {-webkit-box-flex: 0;-webkit-flex: 0 0 35%;-moz-box-flex: 0;-moz-flex: 0 0 35%;-ms-flex: 0 0 35%;flex: 0 0 35%;max-width: 35%;
}.col-37 {-webkit-box-flex: 0;-webkit-flex: 0 0 37%;-moz-box-flex: 0;-moz-flex: 0 0 37%;-ms-flex: 0 0 37%;flex: 0 0 37%;max-width: 37%;
}.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-55 {-webkit-box-flex: 0;-webkit-flex: 0 0 55%;-moz-box-flex: 0;-moz-flex: 0 0 55%;-ms-flex: 0 0 55%;flex: 0 0 55%;max-width: 55%;
}.col-60 {-webkit-box-flex: 0;-webkit-flex: 0 0 60%;-moz-box-flex: 0;-moz-flex: 0 0 60%;-ms-flex: 0 0 60%;flex: 0 0 60%;max-width: 60%; }.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-70 {-webkit-box-flex: 0;-webkit-flex: 0 0 70%;-moz-box-flex: 0;-moz-flex: 0 0 70%;-ms-flex: 0 0 70%;flex: 0 0 70%;max-width: 70%;
}.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%; }