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%; }