game-box/public/common/base/grid.css

@charset "utf-8";
.auto{margin: auto;}
.wrap,.wrap-full{position:relative;clear:both;}
.wrap:after,.wrap-full:after{clear:both;display:table;content:"";line-height:0;}
/**--布局--**/
.row {display:flex;flex-wrap:wrap;}
/* 水平位置 */
.row.x-start {justify-content:flex-start;}.row.x-center {justify-content:center;}.row.x-end {justify-content:flex-end;}
/* 垂直位置 */
.row.y-start {align-items:flex-start;}.row.y-center {align-items:center;}.row.y-end {align-items:flex-end;}
/* 使块元素两端对齐，块元素之间的间隔都相 */
.row.between {justify-content:space-between;}  
/* 元素两侧的间隔都相 */
.row.around {justify-content:space-around;}
/*布局 20 格子*/
.row>.col{flex:auto;}
.row>.col-5 {flex-basis:5%;width:5%;}
.row>.col-10 {flex-basis:10%;width:10%;}
.row>.col-15 {flex-basis:15%;width:15%;}
.row>.col-20 {flex-basis:20%;width:20%;}
.row>.col-25 {flex-basis:25%;width:25%;}
.row>.col-30 {flex-basis:30%;width:30%;}
.row>.col-33 {flex-basis:33.33339%;width:33.33339%;}
.row>.col-35 {flex-basis:35%;width:35%;}
.row>.col-40 {flex-basis:40%;width:40%;}
.row>.col-45 {flex-basis:45%;width:45%;}
.row>.col-50 {flex-basis:50%;width:50%;}
.row>.col-55 {flex-basis:55%;width:55%;}
.row>.col-60 {flex-basis:60%;width:60%;}
.row>.col-65 {flex-basis:65%;width:65%;}
.row>.col-66 {flex-basis:66.6669%;width:66.66669%;}
.row>.col-70 {flex-basis:70%;width:70%;}
.row>.col-75 {flex-basis:75%;width:75%;}
.row>.col-80 {flex-basis:80%;width:80%;}
.row>.col-85 {flex-basis:85%;width:85%;}
.row>.col-90 {flex-basis:90%;width:90%;}
.row>.col-95 {flex-basis:95%;width:95%;}
.row>.col-100 {flex-basis:100%;width:100%;}
/*间距*/
.row>[class^="col"].plr,.row>[class*="col"].plr {padding-right:.75rem;padding-left:.75rem;}
@media screen and (min-width:764px){
    .row>.col-s5 {flex-basis:5%;width:5%;}
    .row>.col-s10 {flex-basis:10%;width:10%;}
    .row>.col-s15 {flex-basis:15%;width:15%;}
    .row>.col-s20 {flex-basis:20%;width:20%;}
    .row>.col-s25 {flex-basis:25%;width:25%;}
    .row>.col-s30 {flex-basis:30%;width:30%;}
    .row>.col-s33 {flex-basis:33.33339%;width:33.33339%;}
    .row>.col-s35 {flex-basis:35%;width:35%;}
    .row>.col-s40 {flex-basis:40%;width:40%;}
    .row>.col-s45 {flex-basis:45%;width:45%;}
    .row>.col-s50 {flex-basis:50%;width:50%;}
    .row>.col-s55 {flex-basis:55%;width:55%;}
    .row>.col-s60 {flex-basis:60%;width:60%;}
    .row>.col-s65 {flex-basis:65%;width:65%;}
    .row>.col-s66 {flex-basis:66.6669%;width:66.66669%;}
    .row>.col-s70 {flex-basis:70%;width:70%;}
    .row>.col-s75 {flex-basis:75%;width:75%;}
    .row>.col-s80 {flex-basis:80%;width:80%;}
    .row>.col-s85 {flex-basis:85%;width:85%;}
    .row>.col-s90 {flex-basis:90%;width:90%;}
    .row>.col-s95 {flex-basis:95%;width:95%;}
    .row>.col-s100 {flex-basis:100%;width:100%;}
    .show-s{display:block !important;}.hide-s{display:none !important;}
    .wrapper,.wrap,.wrap-full{width: 100%;}
}
@media (min-width:1024px){
    .wrap{width:1024px;}
    .wrapper{min-width:1024px;max-width:100%}
}
@media (min-width:1240px){
    .wrap{width:1240px;}
    .wrapper{min-width:1240px;max-width:100%;}
}
@media screen and (max-width:762px){
    .row>.col-m5 {flex-basis:5%;width:5%;}
    .row>.col-m10 {flex-basis:10%;width:10%;}
    .row>.col-m15 {flex-basis:15%;width:15%;}
    .row>.col-m20 {flex-basis:20%;width:20%;}
    .row>.col-m25 {flex-basis:25%;width:25%;}
    .row>.col-m30 {flex-basis:30%;width:30%;}
    .row>.col-m33 {flex-basis:33.33339%;width:33.33339%;}
    .row>.col-m35 {flex-basis:35%;width:35%;}
    .row>.col-m40 {flex-basis:40%;width:40%;}
    .row>.col-m45 {flex-basis:45%;width:45%;}
    .row>.col-m50 {flex-basis:50%;width:50%;}
    .row>.col-m55 {flex-basis:55%;width:55%;}
    .row>.col-m60 {flex-basis:60%;width:60%;}
    .row>.col-m65 {flex-basis:65%;width:65%;}
    .row>.col-m66 {flex-basis:66.6669%;width:66.66669%;}
    .row>.col-m70 {flex-basis:70%;width:70%;}
    .row>.col-m75 {flex-basis:75%;width:75%;}
    .row>.col-m80 {flex-basis:80%;width:80%;}
    .row>.col-m85 {flex-basis:85%;width:85%;}
    .row>.col-m90 {flex-basis:90%;width:90%;}
    .row>.col-m95 {flex-basis:95%;width:95%;}
    .row>.col-m100 {flex-basis:100%;width:100%;}
    .show-m{display:block !important;}.hide-m{display:none !important;}
    .wrapper,.wrap,.wrap-full{width: 100%;}
}