small-flexgrid
Version:
A small flexbox grid written in Less
2 lines (1 loc) • 15.6 kB
CSS
@supports(display:flex){.row,.col{display:flex;flex:0 1 auto;flex-wrap:wrap}}@supports not(display:flex){.row,.col{display:table}.row [class*="col-"],.col [class*="col-"]{display:table-cell}}@supports(display:flex){.row{flex-direction:row}.col{flex-direction:column}.row.reverse{flex-direction:row-reverse}.col.reverse{flex-direction:column-reverse}}@supports not(display:flex){.row{direction:ltr}.row.reverse{direction:rtl}}.col-all-1{flex-basis:8.333333333333334%;max-width:8.333333333333334%;width:8.333333333333334%}.offset-all-1{margin-left:8.333333333333334%}.col-all-2{flex-basis:16.666666666666668%;max-width:16.666666666666668%;width:16.666666666666668%}.offset-all-2{margin-left:16.666666666666668%}.col-all-3{flex-basis:25%;max-width:25%;width:25%}.offset-all-3{margin-left:25%}.col-all-4{flex-basis:33.333333333333336%;max-width:33.333333333333336%;width:33.333333333333336%}.offset-all-4{margin-left:33.333333333333336%}.col-all-5{flex-basis:41.666666666666664%;max-width:41.666666666666664%;width:41.666666666666664%}.offset-all-5{margin-left:41.666666666666664%}.col-all-6{flex-basis:50%;max-width:50%;width:50%}.offset-all-6{margin-left:50%}.col-all-7{flex-basis:58.333333333333336%;max-width:58.333333333333336%;width:58.333333333333336%}.offset-all-7{margin-left:58.333333333333336%}.col-all-8{flex-basis:66.66666666666667%;max-width:66.66666666666667%;width:66.66666666666667%}.offset-all-8{margin-left:66.66666666666667%}.col-all-9{flex-basis:75%;max-width:75%;width:75%}.offset-all-9{margin-left:75%}.col-all-10{flex-basis:83.33333333333333%;max-width:83.33333333333333%;width:83.33333333333333%}.offset-all-10{margin-left:83.33333333333333%}.col-all-11{flex-basis:91.66666666666667%;max-width:91.66666666666667%;width:91.66666666666667%}.offset-all-11{margin-left:91.66666666666667%}.col-all-12,.col-all{flex-basis:100%;max-width:100%;width:100%}.offset-all-12{margin-left:100%}.start-all{justify-content:flex-start;text-align:left}.center-all{justify-content:center;text-align:center}.end-all{justify-content:flex-end;text-align:right}.around-all{justify-content:space-around}.between-all{justify-content:space-between}.stretch-horizontal-all{justify-content:stretch}.stretch-vertical-all{align-items:stretch}.top-all{align-items:flex-start;vertical-align:top}.middle-all{align-items:center;vertical-align:middle}.bottom-all{align-items:flex-end;vertical-align:bottom}.first-all{order:-1}.last-all{order:1}@media(min-width:20rem){.col-xs-1{flex-basis:8.333333333333334%;max-width:8.333333333333334%;width:8.333333333333334%}.offset-xs-1{margin-left:8.333333333333334%}.col-xs-2{flex-basis:16.666666666666668%;max-width:16.666666666666668%;width:16.666666666666668%}.offset-xs-2{margin-left:16.666666666666668%}.col-xs-3{flex-basis:25%;max-width:25%;width:25%}.offset-xs-3{margin-left:25%}.col-xs-4{flex-basis:33.333333333333336%;max-width:33.333333333333336%;width:33.333333333333336%}.offset-xs-4{margin-left:33.333333333333336%}.col-xs-5{flex-basis:41.666666666666664%;max-width:41.666666666666664%;width:41.666666666666664%}.offset-xs-5{margin-left:41.666666666666664%}.col-xs-6{flex-basis:50%;max-width:50%;width:50%}.offset-xs-6{margin-left:50%}.col-xs-7{flex-basis:58.333333333333336%;max-width:58.333333333333336%;width:58.333333333333336%}.offset-xs-7{margin-left:58.333333333333336%}.col-xs-8{flex-basis:66.66666666666667%;max-width:66.66666666666667%;width:66.66666666666667%}.offset-xs-8{margin-left:66.66666666666667%}.col-xs-9{flex-basis:75%;max-width:75%;width:75%}.offset-xs-9{margin-left:75%}.col-xs-10{flex-basis:83.33333333333333%;max-width:83.33333333333333%;width:83.33333333333333%}.offset-xs-10{margin-left:83.33333333333333%}.col-xs-11{flex-basis:91.66666666666667%;max-width:91.66666666666667%;width:91.66666666666667%}.offset-xs-11{margin-left:91.66666666666667%}.col-xs-12,.col-xs{flex-basis:100%;max-width:100%;width:100%}.offset-xs-12{margin-left:100%}.start-xs{justify-content:flex-start;text-align:left}.center-xs{justify-content:center;text-align:center}.end-xs{justify-content:flex-end;text-align:right}.around-xs{justify-content:space-around}.between-xs{justify-content:space-between}.stretch-horizontal-xs{justify-content:stretch}.stretch-vertical-xs{align-items:stretch}.top-xs{align-items:flex-start;vertical-align:top}.middle-xs{align-items:center;vertical-align:middle}.bottom-xs{align-items:flex-end;vertical-align:bottom}.first-xs{order:-1}.last-xs{order:1}}@media(min-width:20rem) and (max-width:33.74rem){.xs{width:20rem}.hidden-xs{display:none }}@media(max-width:19.99rem){.pre-xs{width:20rem}.hidden-pre-xs{display:none }}@media(min-width:20rem){.post-xs{width:20rem}.hidden-post-xs{display:none }}@media(min-width:33.75rem){.col-sm-1{flex-basis:8.333333333333334%;max-width:8.333333333333334%;width:8.333333333333334%}.offset-sm-1{margin-left:8.333333333333334%}.col-sm-2{flex-basis:16.666666666666668%;max-width:16.666666666666668%;width:16.666666666666668%}.offset-sm-2{margin-left:16.666666666666668%}.col-sm-3{flex-basis:25%;max-width:25%;width:25%}.offset-sm-3{margin-left:25%}.col-sm-4{flex-basis:33.333333333333336%;max-width:33.333333333333336%;width:33.333333333333336%}.offset-sm-4{margin-left:33.333333333333336%}.col-sm-5{flex-basis:41.666666666666664%;max-width:41.666666666666664%;width:41.666666666666664%}.offset-sm-5{margin-left:41.666666666666664%}.col-sm-6{flex-basis:50%;max-width:50%;width:50%}.offset-sm-6{margin-left:50%}.col-sm-7{flex-basis:58.333333333333336%;max-width:58.333333333333336%;width:58.333333333333336%}.offset-sm-7{margin-left:58.333333333333336%}.col-sm-8{flex-basis:66.66666666666667%;max-width:66.66666666666667%;width:66.66666666666667%}.offset-sm-8{margin-left:66.66666666666667%}.col-sm-9{flex-basis:75%;max-width:75%;width:75%}.offset-sm-9{margin-left:75%}.col-sm-10{flex-basis:83.33333333333333%;max-width:83.33333333333333%;width:83.33333333333333%}.offset-sm-10{margin-left:83.33333333333333%}.col-sm-11{flex-basis:91.66666666666667%;max-width:91.66666666666667%;width:91.66666666666667%}.offset-sm-11{margin-left:91.66666666666667%}.col-sm-12,.col-sm{flex-basis:100%;max-width:100%;width:100%}.offset-sm-12{margin-left:100%}.start-sm{justify-content:flex-start;text-align:left}.center-sm{justify-content:center;text-align:center}.end-sm{justify-content:flex-end;text-align:right}.around-sm{justify-content:space-around}.between-sm{justify-content:space-between}.stretch-horizontal-sm{justify-content:stretch}.stretch-vertical-sm{align-items:stretch}.top-sm{align-items:flex-start;vertical-align:top}.middle-sm{align-items:center;vertical-align:middle}.bottom-sm{align-items:flex-end;vertical-align:bottom}.first-sm{order:-1}.last-sm{order:1}}@media(min-width:33.75rem) and (max-width:47.99rem){.sm{width:33.75rem}.hidden-sm{display:none }}@media(max-width:33.74rem){.pre-sm{width:33.75rem}.hidden-pre-sm{display:none }}@media(min-width:33.75rem){.post-sm{width:33.75rem}.hidden-post-sm{display:none }}@media(min-width:48rem){.col-md-1{flex-basis:8.333333333333334%;max-width:8.333333333333334%;width:8.333333333333334%}.offset-md-1{margin-left:8.333333333333334%}.col-md-2{flex-basis:16.666666666666668%;max-width:16.666666666666668%;width:16.666666666666668%}.offset-md-2{margin-left:16.666666666666668%}.col-md-3{flex-basis:25%;max-width:25%;width:25%}.offset-md-3{margin-left:25%}.col-md-4{flex-basis:33.333333333333336%;max-width:33.333333333333336%;width:33.333333333333336%}.offset-md-4{margin-left:33.333333333333336%}.col-md-5{flex-basis:41.666666666666664%;max-width:41.666666666666664%;width:41.666666666666664%}.offset-md-5{margin-left:41.666666666666664%}.col-md-6{flex-basis:50%;max-width:50%;width:50%}.offset-md-6{margin-left:50%}.col-md-7{flex-basis:58.333333333333336%;max-width:58.333333333333336%;width:58.333333333333336%}.offset-md-7{margin-left:58.333333333333336%}.col-md-8{flex-basis:66.66666666666667%;max-width:66.66666666666667%;width:66.66666666666667%}.offset-md-8{margin-left:66.66666666666667%}.col-md-9{flex-basis:75%;max-width:75%;width:75%}.offset-md-9{margin-left:75%}.col-md-10{flex-basis:83.33333333333333%;max-width:83.33333333333333%;width:83.33333333333333%}.offset-md-10{margin-left:83.33333333333333%}.col-md-11{flex-basis:91.66666666666667%;max-width:91.66666666666667%;width:91.66666666666667%}.offset-md-11{margin-left:91.66666666666667%}.col-md-12,.col-md{flex-basis:100%;max-width:100%;width:100%}.offset-md-12{margin-left:100%}.start-md{justify-content:flex-start;text-align:left}.center-md{justify-content:center;text-align:center}.end-md{justify-content:flex-end;text-align:right}.around-md{justify-content:space-around}.between-md{justify-content:space-between}.stretch-horizontal-md{justify-content:stretch}.stretch-vertical-md{align-items:stretch}.top-md{align-items:flex-start;vertical-align:top}.middle-md{align-items:center;vertical-align:middle}.bottom-md{align-items:flex-end;vertical-align:bottom}.first-md{order:-1}.last-md{order:1}}@media(min-width:48rem) and (max-width:63.74rem){.md{width:48rem}.hidden-md{display:none }}@media(max-width:47.99rem){.pre-md{width:48rem}.hidden-pre-md{display:none }}@media(min-width:48rem){.post-md{width:48rem}.hidden-post-md{display:none }}@media(min-width:63.75rem){.col-lg-1{flex-basis:8.333333333333334%;max-width:8.333333333333334%;width:8.333333333333334%}.offset-lg-1{margin-left:8.333333333333334%}.col-lg-2{flex-basis:16.666666666666668%;max-width:16.666666666666668%;width:16.666666666666668%}.offset-lg-2{margin-left:16.666666666666668%}.col-lg-3{flex-basis:25%;max-width:25%;width:25%}.offset-lg-3{margin-left:25%}.col-lg-4{flex-basis:33.333333333333336%;max-width:33.333333333333336%;width:33.333333333333336%}.offset-lg-4{margin-left:33.333333333333336%}.col-lg-5{flex-basis:41.666666666666664%;max-width:41.666666666666664%;width:41.666666666666664%}.offset-lg-5{margin-left:41.666666666666664%}.col-lg-6{flex-basis:50%;max-width:50%;width:50%}.offset-lg-6{margin-left:50%}.col-lg-7{flex-basis:58.333333333333336%;max-width:58.333333333333336%;width:58.333333333333336%}.offset-lg-7{margin-left:58.333333333333336%}.col-lg-8{flex-basis:66.66666666666667%;max-width:66.66666666666667%;width:66.66666666666667%}.offset-lg-8{margin-left:66.66666666666667%}.col-lg-9{flex-basis:75%;max-width:75%;width:75%}.offset-lg-9{margin-left:75%}.col-lg-10{flex-basis:83.33333333333333%;max-width:83.33333333333333%;width:83.33333333333333%}.offset-lg-10{margin-left:83.33333333333333%}.col-lg-11{flex-basis:91.66666666666667%;max-width:91.66666666666667%;width:91.66666666666667%}.offset-lg-11{margin-left:91.66666666666667%}.col-lg-12,.col-lg{flex-basis:100%;max-width:100%;width:100%}.offset-lg-12{margin-left:100%}.start-lg{justify-content:flex-start;text-align:left}.center-lg{justify-content:center;text-align:center}.end-lg{justify-content:flex-end;text-align:right}.around-lg{justify-content:space-around}.between-lg{justify-content:space-between}.stretch-horizontal-lg{justify-content:stretch}.stretch-vertical-lg{align-items:stretch}.top-lg{align-items:flex-start;vertical-align:top}.middle-lg{align-items:center;vertical-align:middle}.bottom-lg{align-items:flex-end;vertical-align:bottom}.first-lg{order:-1}.last-lg{order:1}}@media(min-width:63.75rem) and (max-width:76.24rem){.lg{width:63.75rem}.hidden-lg{display:none }}@media(max-width:63.74rem){.pre-lg{width:63.75rem}.hidden-pre-lg{display:none }}@media(min-width:63.75rem){.post-lg{width:63.75rem}.hidden-post-lg{display:none }}@media(min-width:76.25rem){.col-xl-1{flex-basis:8.333333333333334%;max-width:8.333333333333334%;width:8.333333333333334%}.offset-xl-1{margin-left:8.333333333333334%}.col-xl-2{flex-basis:16.666666666666668%;max-width:16.666666666666668%;width:16.666666666666668%}.offset-xl-2{margin-left:16.666666666666668%}.col-xl-3{flex-basis:25%;max-width:25%;width:25%}.offset-xl-3{margin-left:25%}.col-xl-4{flex-basis:33.333333333333336%;max-width:33.333333333333336%;width:33.333333333333336%}.offset-xl-4{margin-left:33.333333333333336%}.col-xl-5{flex-basis:41.666666666666664%;max-width:41.666666666666664%;width:41.666666666666664%}.offset-xl-5{margin-left:41.666666666666664%}.col-xl-6{flex-basis:50%;max-width:50%;width:50%}.offset-xl-6{margin-left:50%}.col-xl-7{flex-basis:58.333333333333336%;max-width:58.333333333333336%;width:58.333333333333336%}.offset-xl-7{margin-left:58.333333333333336%}.col-xl-8{flex-basis:66.66666666666667%;max-width:66.66666666666667%;width:66.66666666666667%}.offset-xl-8{margin-left:66.66666666666667%}.col-xl-9{flex-basis:75%;max-width:75%;width:75%}.offset-xl-9{margin-left:75%}.col-xl-10{flex-basis:83.33333333333333%;max-width:83.33333333333333%;width:83.33333333333333%}.offset-xl-10{margin-left:83.33333333333333%}.col-xl-11{flex-basis:91.66666666666667%;max-width:91.66666666666667%;width:91.66666666666667%}.offset-xl-11{margin-left:91.66666666666667%}.col-xl-12,.col-xl{flex-basis:100%;max-width:100%;width:100%}.offset-xl-12{margin-left:100%}.start-xl{justify-content:flex-start;text-align:left}.center-xl{justify-content:center;text-align:center}.end-xl{justify-content:flex-end;text-align:right}.around-xl{justify-content:space-around}.between-xl{justify-content:space-between}.stretch-horizontal-xl{justify-content:stretch}.stretch-vertical-xl{align-items:stretch}.top-xl{align-items:flex-start;vertical-align:top}.middle-xl{align-items:center;vertical-align:middle}.bottom-xl{align-items:flex-end;vertical-align:bottom}.first-xl{order:-1}.last-xl{order:1}}@media(min-width:76.25rem){.xl{width:76.25rem}.hidden-xl{display:none }}@media(max-width:76.24rem){.pre-xl{width:76.25rem}.hidden-pre-xl{display:none }}@media(min-width:76.25rem){.post-xl{width:76.25rem}.hidden-post-xl{display:none }}@media(min-width:20rem) and (max-width:33.74rem){.hidden-xs-sm{display:none }}@media(min-width:20rem) and (max-width:47.99rem){.hidden-xs-md{display:none }}@media(min-width:20rem) and (max-width:63.74rem){.hidden-xs-lg{display:none }}@media(min-width:20rem) and (max-width:76.24rem){.hidden-xs-xl{display:none }}@media(min-width:33.75rem) and (max-width:19.99rem){.hidden-sm-xs{display:none }}@media(min-width:33.75rem) and (max-width:47.99rem){.hidden-sm-md{display:none }}@media(min-width:33.75rem) and (max-width:63.74rem){.hidden-sm-lg{display:none }}@media(min-width:33.75rem) and (max-width:76.24rem){.hidden-sm-xl{display:none }}@media(min-width:48rem) and (max-width:19.99rem){.hidden-md-xs{display:none }}@media(min-width:48rem) and (max-width:33.74rem){.hidden-md-sm{display:none }}@media(min-width:48rem) and (max-width:63.74rem){.hidden-md-lg{display:none }}@media(min-width:48rem) and (max-width:76.24rem){.hidden-md-xl{display:none }}@media(min-width:63.75rem) and (max-width:19.99rem){.hidden-lg-xs{display:none }}@media(min-width:63.75rem) and (max-width:33.74rem){.hidden-lg-sm{display:none }}@media(min-width:63.75rem) and (max-width:47.99rem){.hidden-lg-md{display:none }}@media(min-width:63.75rem) and (max-width:76.24rem){.hidden-lg-xl{display:none }}@media(min-width:76.25rem) and (max-width:19.99rem){.hidden-xl-xs{display:none }}@media(min-width:76.25rem) and (max-width:33.74rem){.hidden-xl-sm{display:none }}@media(min-width:76.25rem) and (max-width:47.99rem){.hidden-xl-md{display:none }}@media(min-width:76.25rem) and (max-width:63.74rem){.hidden-xl-lg{display:none }}.hidden{display:none }