Skip to content

Instantly share code, notes, and snippets.

@jacobshenning

jacobshenning/flex.css

Last active April 9, 2018 17:42
Show Gist options
  • Save jacobshenning/a774363d8983afdcfd1a76c825a9518e to your computer and use it in GitHub Desktop.
Save jacobshenning/a774363d8983afdcfd1a76c825a9518e to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox
Raw
flex.css
/* Variables - Add to your variable file */
/* Functions - Add to your function file */
/* Style - Add to your function grid file */
.row {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
}
.row.reverse {
flex-direction: row-reverse;
}
.row.align-v-center {
align-items: center;
}
.row.align-v-bottom {
align-items: end;
}
.row.align-h-center {
justify-content: center;
}
.row.align-h-right {
justify-content: flex-end;
}
.row [class*="col"],
.row [class*="s"],
.row [class*="m"],
.row [class*="l"],
.row [class*="xl"] {
box-sizing: border-box;
flex-basis: 0;
flex-grow: 0;
flex-shrink: 0;
position: relative;
flex-grow: 1;
width: 100%;
}
@media (max-width: 599.99px) {
.row [class*="col"],
.row [class*="s"],
.row [class*="m"],
.row [class*="l"],
.row [class*="xl"] {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
}
.row [class*="col"]:nth-of-type(1),
.row [class*="s"]:nth-of-type(1),
.row [class*="m"]:nth-of-type(1),
.row [class*="l"]:nth-of-type(1),
.row [class*="xl"]:nth-of-type(1) {
order: 2;
}
.row [class*="col"]:nth-of-type(2),
.row [class*="s"]:nth-of-type(2),
.row [class*="m"]:nth-of-type(2),
.row [class*="l"]:nth-of-type(2),
.row [class*="xl"]:nth-of-type(2) {
order: 4;
}
.row [class*="col"]:nth-of-type(3),
.row [class*="s"]:nth-of-type(3),
.row [class*="m"]:nth-of-type(3),
.row [class*="l"]:nth-of-type(3),
.row [class*="xl"]:nth-of-type(3) {
order: 6;
}
.row [class*="col"]:nth-of-type(4),
.row [class*="s"]:nth-of-type(4),
.row [class*="m"]:nth-of-type(4),
.row [class*="l"]:nth-of-type(4),
.row [class*="xl"]:nth-of-type(4) {
order: 8;
}
.row [class*="col"]:nth-of-type(5),
.row [class*="s"]:nth-of-type(5),
.row [class*="m"]:nth-of-type(5),
.row [class*="l"]:nth-of-type(5),
.row [class*="xl"]:nth-of-type(5) {
order: 10;
}
.row [class*="col"]:nth-of-type(6),
.row [class*="s"]:nth-of-type(6),
.row [class*="m"]:nth-of-type(6),
.row [class*="l"]:nth-of-type(6),
.row [class*="xl"]:nth-of-type(6) {
order: 12;
}
.row [class*="col"]:nth-of-type(7),
.row [class*="s"]:nth-of-type(7),
.row [class*="m"]:nth-of-type(7),
.row [class*="l"]:nth-of-type(7),
.row [class*="xl"]:nth-of-type(7) {
order: 14;
}
.row [class*="col"]:nth-of-type(8),
.row [class*="s"]:nth-of-type(8),
.row [class*="m"]:nth-of-type(8),
.row [class*="l"]:nth-of-type(8),
.row [class*="xl"]:nth-of-type(8) {
order: 16;
}
.row [class*="col"]:nth-of-type(9),
.row [class*="s"]:nth-of-type(9),
.row [class*="m"]:nth-of-type(9),
.row [class*="l"]:nth-of-type(9),
.row [class*="xl"]:nth-of-type(9) {
order: 18;
}
.row [class*="col"]:nth-of-type(10),
.row [class*="s"]:nth-of-type(10),
.row [class*="m"]:nth-of-type(10),
.row [class*="l"]:nth-of-type(10),
.row [class*="xl"]:nth-of-type(10) {
order: 20;
}
.row [class*="col"]:nth-of-type(11),
.row [class*="s"]:nth-of-type(11),
.row [class*="m"]:nth-of-type(11),
.row [class*="l"]:nth-of-type(11),
.row [class*="xl"]:nth-of-type(11) {
order: 22;
}
.row [class*="col"]:nth-of-type(12),
.row [class*="s"]:nth-of-type(12),
.row [class*="m"]:nth-of-type(12),
.row [class*="l"]:nth-of-type(12),
.row [class*="xl"]:nth-of-type(12) {
order: 24;
}
.row [class*="col"]:nth-of-type(13),
.row [class*="s"]:nth-of-type(13),
.row [class*="m"]:nth-of-type(13),
.row [class*="l"]:nth-of-type(13),
.row [class*="xl"]:nth-of-type(13) {
order: 26;
}
.row [class*="col"]:nth-of-type(14),
.row [class*="s"]:nth-of-type(14),
.row [class*="m"]:nth-of-type(14),
.row [class*="l"]:nth-of-type(14),
.row [class*="xl"]:nth-of-type(14) {
order: 28;
}
.row [class*="col"]:nth-of-type(15),
.row [class*="s"]:nth-of-type(15),
.row [class*="m"]:nth-of-type(15),
.row [class*="l"]:nth-of-type(15),
.row [class*="xl"]:nth-of-type(15) {
order: 30;
}
.row [class*="col"]:nth-of-type(16),
.row [class*="s"]:nth-of-type(16),
.row [class*="m"]:nth-of-type(16),
.row [class*="l"]:nth-of-type(16),
.row [class*="xl"]:nth-of-type(16) {
order: 32;
}
.row [class*="col"]:nth-of-type(17),
.row [class*="s"]:nth-of-type(17),
.row [class*="m"]:nth-of-type(17),
.row [class*="l"]:nth-of-type(17),
.row [class*="xl"]:nth-of-type(17) {
order: 34;
}
.row [class*="col"]:nth-of-type(18),
.row [class*="s"]:nth-of-type(18),
.row [class*="m"]:nth-of-type(18),
.row [class*="l"]:nth-of-type(18),
.row [class*="xl"]:nth-of-type(18) {
order: 36;
}
@media (min-width: 0) {
.row .ord-s1 {
order: 1 !important;
}
}
@media (min-width: 0) {
.row .ord-s2 {
order: 3 !important;
}
}
@media (min-width: 0) {
.row .ord-s3 {
order: 5 !important;
}
}
@media (min-width: 0) {
.row .ord-s4 {
order: 7 !important;
}
}
@media (min-width: 0) {
.row .ord-s5 {
order: 9 !important;
}
}
@media (min-width: 0) {
.row .ord-s6 {
order: 11 !important;
}
}
@media (min-width: 0) {
.row .ord-s7 {
order: 13 !important;
}
}
@media (min-width: 0) {
.row .ord-s8 {
order: 15 !important;
}
}
@media (min-width: 0) {
.row .ord-s9 {
order: 17 !important;
}
}
@media (min-width: 0) {
.row .ord-s10 {
order: 19 !important;
}
}
@media (min-width: 0) {
.row .ord-s11 {
order: 21 !important;
}
}
@media (min-width: 0) {
.row .ord-s12 {
order: 23 !important;
}
}
@media (min-width: 0) {
.row .ord-s13 {
order: 25 !important;
}
}
@media (min-width: 0) {
.row .ord-s14 {
order: 27 !important;
}
}
@media (min-width: 0) {
.row .ord-s15 {
order: 29 !important;
}
}
@media (min-width: 0) {
.row .ord-s16 {
order: 31 !important;
}
}
@media (min-width: 0) {
.row .ord-s17 {
order: 33 !important;
}
}
@media (min-width: 0) {
.row .ord-s18 {
order: 35 !important;
}
}
@media (min-width: 600px) {
.row .ord-m1 {
order: 1 !important;
}
}
@media (min-width: 600px) {
.row .ord-m2 {
order: 3 !important;
}
}
@media (min-width: 600px) {
.row .ord-m3 {
order: 5 !important;
}
}
@media (min-width: 600px) {
.row .ord-m4 {
order: 7 !important;
}
}
@media (min-width: 600px) {
.row .ord-m5 {
order: 9 !important;
}
}
@media (min-width: 600px) {
.row .ord-m6 {
order: 11 !important;
}
}
@media (min-width: 600px) {
.row .ord-m7 {
order: 13 !important;
}
}
@media (min-width: 600px) {
.row .ord-m8 {
order: 15 !important;
}
}
@media (min-width: 600px) {
.row .ord-m9 {
order: 17 !important;
}
}
@media (min-width: 600px) {
.row .ord-m10 {
order: 19 !important;
}
}
@media (min-width: 600px) {
.row .ord-m11 {
order: 21 !important;
}
}
@media (min-width: 600px) {
.row .ord-m12 {
order: 23 !important;
}
}
@media (min-width: 600px) {
.row .ord-m13 {
order: 25 !important;
}
}
@media (min-width: 600px) {
.row .ord-m14 {
order: 27 !important;
}
}
@media (min-width: 600px) {
.row .ord-m15 {
order: 29 !important;
}
}
@media (min-width: 600px) {
.row .ord-m16 {
order: 31 !important;
}
}
@media (min-width: 600px) {
.row .ord-m17 {
order: 33 !important;
}
}
@media (min-width: 600px) {
.row .ord-m18 {
order: 35 !important;
}
}
@media (min-width: 992px) {
.row .ord-l1 {
order: 1 !important;
}
}
@media (min-width: 992px) {
.row .ord-l2 {
order: 3 !important;
}
}
@media (min-width: 992px) {
.row .ord-l3 {
order: 5 !important;
}
}
@media (min-width: 992px) {
.row .ord-l4 {
order: 7 !important;
}
}
@media (min-width: 992px) {
.row .ord-l5 {
order: 9 !important;
}
}
@media (min-width: 992px) {
.row .ord-l6 {
order: 11 !important;
}
}
@media (min-width: 992px) {
.row .ord-l7 {
order: 13 !important;
}
}
@media (min-width: 992px) {
.row .ord-l8 {
order: 15 !important;
}
}
@media (min-width: 992px) {
.row .ord-l9 {
order: 17 !important;
}
}
@media (min-width: 992px) {
.row .ord-l10 {
order: 19 !important;
}
}
@media (min-width: 992px) {
.row .ord-l11 {
order: 21 !important;
}
}
@media (min-width: 992px) {
.row .ord-l12 {
order: 23 !important;
}
}
@media (min-width: 992px) {
.row .ord-l13 {
order: 25 !important;
}
}
@media (min-width: 992px) {
.row .ord-l14 {
order: 27 !important;
}
}
@media (min-width: 992px) {
.row .ord-l15 {
order: 29 !important;
}
}
@media (min-width: 992px) {
.row .ord-l16 {
order: 31 !important;
}
}
@media (min-width: 992px) {
.row .ord-l17 {
order: 33 !important;
}
}
@media (min-width: 992px) {
.row .ord-l18 {
order: 35 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl1 {
order: 1 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl2 {
order: 3 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl3 {
order: 5 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl4 {
order: 7 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl5 {
order: 9 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl6 {
order: 11 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl7 {
order: 13 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl8 {
order: 15 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl9 {
order: 17 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl10 {
order: 19 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl11 {
order: 21 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl12 {
order: 23 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl13 {
order: 25 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl14 {
order: 27 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl15 {
order: 29 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl16 {
order: 31 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl17 {
order: 33 !important;
}
}
@media (min-width: 1200px) {
.row .ord-xl18 {
order: 35 !important;
}
}
@media (min-width: 0) {
.row .s1 {
flex-grow: 0;
flex-basis: 8.3333333333%;
width: 8.3333333333%;
}
}
@media (min-width: 0) {
.row .s2 {
flex-grow: 0;
flex-basis: 16.6666666667%;
width: 16.6666666667%;
}
}
@media (min-width: 0) {
.row .s3 {
flex-grow: 0;
flex-basis: 25%;
width: 25%;
}
}
@media (min-width: 0) {
.row .s4 {
flex-grow: 0;
flex-basis: 33.3333333333%;
width: 33.3333333333%;
}
}
@media (min-width: 0) {
.row .s5 {
flex-grow: 0;
flex-basis: 41.6666666667%;
width: 41.6666666667%;
}
}
@media (min-width: 0) {
.row .s6 {
flex-grow: 0;
flex-basis: 50%;
width: 50%;
}
}
@media (min-width: 0) {
.row .s7 {
flex-grow: 0;
flex-basis: 58.3333333333%;
width: 58.3333333333%;
}
}
@media (min-width: 0) {
.row .s8 {
flex-grow: 0;
flex-basis: 66.6666666667%;
width: 66.6666666667%;
}
}
@media (min-width: 0) {
.row .s9 {
flex-grow: 0;
flex-basis: 75%;
width: 75%;
}
}
@media (min-width: 0) {
.row .s10 {
flex-grow: 0;
flex-basis: 83.3333333333%;
width: 83.3333333333%;
}
}
@media (min-width: 0) {
.row .s11 {
flex-grow: 0;
flex-basis: 91.6666666667%;
width: 91.6666666667%;
}
}
@media (min-width: 0) {
.row .s12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
}
@media (min-width: 600px) {
.row .m1 {
flex-grow: 0;
flex-basis: 8.3333333333%;
width: 8.3333333333%;
}
}
@media (min-width: 600px) {
.row .m2 {
flex-grow: 0;
flex-basis: 16.6666666667%;
width: 16.6666666667%;
}
}
@media (min-width: 600px) {
.row .m3 {
flex-grow: 0;
flex-basis: 25%;
width: 25%;
}
}
@media (min-width: 600px) {
.row .m4 {
flex-grow: 0;
flex-basis: 33.3333333333%;
width: 33.3333333333%;
}
}
@media (min-width: 600px) {
.row .m5 {
flex-grow: 0;
flex-basis: 41.6666666667%;
width: 41.6666666667%;
}
}
@media (min-width: 600px) {
.row .m6 {
flex-grow: 0;
flex-basis: 50%;
width: 50%;
}
}
@media (min-width: 600px) {
.row .m7 {
flex-grow: 0;
flex-basis: 58.3333333333%;
width: 58.3333333333%;
}
}
@media (min-width: 600px) {
.row .m8 {
flex-grow: 0;
flex-basis: 66.6666666667%;
width: 66.6666666667%;
}
}
@media (min-width: 600px) {
.row .m9 {
flex-grow: 0;
flex-basis: 75%;
width: 75%;
}
}
@media (min-width: 600px) {
.row .m10 {
flex-grow: 0;
flex-basis: 83.3333333333%;
width: 83.3333333333%;
}
}
@media (min-width: 600px) {
.row .m11 {
flex-grow: 0;
flex-basis: 91.6666666667%;
width: 91.6666666667%;
}
}
@media (min-width: 600px) {
.row .m12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
}
@media (min-width: 992px) {
.row .l1 {
flex-grow: 0;
flex-basis: 8.3333333333%;
width: 8.3333333333%;
}
}
@media (min-width: 992px) {
.row .l2 {
flex-grow: 0;
flex-basis: 16.6666666667%;
width: 16.6666666667%;
}
}
@media (min-width: 992px) {
.row .l3 {
flex-grow: 0;
flex-basis: 25%;
width: 25%;
}
}
@media (min-width: 992px) {
.row .l4 {
flex-grow: 0;
flex-basis: 33.3333333333%;
width: 33.3333333333%;
}
}
@media (min-width: 992px) {
.row .l5 {
flex-grow: 0;
flex-basis: 41.6666666667%;
width: 41.6666666667%;
}
}
@media (min-width: 992px) {
.row .l6 {
flex-grow: 0;
flex-basis: 50%;
width: 50%;
}
}
@media (min-width: 992px) {
.row .l7 {
flex-grow: 0;
flex-basis: 58.3333333333%;
width: 58.3333333333%;
}
}
@media (min-width: 992px) {
.row .l8 {
flex-grow: 0;
flex-basis: 66.6666666667%;
width: 66.6666666667%;
}
}
@media (min-width: 992px) {
.row .l9 {
flex-grow: 0;
flex-basis: 75%;
width: 75%;
}
}
@media (min-width: 992px) {
.row .l10 {
flex-grow: 0;
flex-basis: 83.3333333333%;
width: 83.3333333333%;
}
}
@media (min-width: 992px) {
.row .l11 {
flex-grow: 0;
flex-basis: 91.6666666667%;
width: 91.6666666667%;
}
}
@media (min-width: 992px) {
.row .l12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
}
@media (min-width: 1200px) {
.row .xl1 {
flex-grow: 0;
flex-basis: 8.3333333333%;
width: 8.3333333333%;
}
}
@media (min-width: 1200px) {
.row .xl2 {
flex-grow: 0;
flex-basis: 16.6666666667%;
width: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.row .xl3 {
flex-grow: 0;
flex-basis: 25%;
width: 25%;
}
}
@media (min-width: 1200px) {
.row .xl4 {
flex-grow: 0;
flex-basis: 33.3333333333%;
width: 33.3333333333%;
}
}
@media (min-width: 1200px) {
.row .xl5 {
flex-grow: 0;
flex-basis: 41.6666666667%;
width: 41.6666666667%;
}
}
@media (min-width: 1200px) {
.row .xl6 {
flex-grow: 0;
flex-basis: 50%;
width: 50%;
}
}
@media (min-width: 1200px) {
.row .xl7 {
flex-grow: 0;
flex-basis: 58.3333333333%;
width: 58.3333333333%;
}
}
@media (min-width: 1200px) {
.row .xl8 {
flex-grow: 0;
flex-basis: 66.6666666667%;
width: 66.6666666667%;
}
}
@media (min-width: 1200px) {
.row .xl9 {
flex-grow: 0;
flex-basis: 75%;
width: 75%;
}
}
@media (min-width: 1200px) {
.row .xl10 {
flex-grow: 0;
flex-basis: 83.3333333333%;
width: 83.3333333333%;
}
}
@media (min-width: 1200px) {
.row .xl11 {
flex-grow: 0;
flex-basis: 91.6666666667%;
width: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.row .xl12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
}
@media (min-width: 0) {
.row .add-s1 {
margin-left: 8.3333333333%;
}
}
@media (min-width: 0) {
.row .sub-s1 {
margin-right: 8.3333333333%;
}
}
@media (min-width: 0) {
.row .push-s1 {
left: 8.3333333333%;
}
}
@media (min-width: 0) {
.row .pull-s1 {
right: 8.3333333333%;
}
}
@media (min-width: 0) {
.row .add-s2 {
margin-left: 16.6666666667%;
}
}
@media (min-width: 0) {
.row .sub-s2 {
margin-right: 16.6666666667%;
}
}
@media (min-width: 0) {
.row .push-s2 {
left: 16.6666666667%;
}
}
@media (min-width: 0) {
.row .pull-s2 {
right: 16.6666666667%;
}
}
@media (min-width: 0) {
.row .add-s3 {
margin-left: 25%;
}
}
@media (min-width: 0) {
.row .sub-s3 {
margin-right: 25%;
}
}
@media (min-width: 0) {
.row .push-s3 {
left: 25%;
}
}
@media (min-width: 0) {
.row .pull-s3 {
right: 25%;
}
}
@media (min-width: 0) {
.row .add-s4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 0) {
.row .sub-s4 {
margin-right: 33.3333333333%;
}
}
@media (min-width: 0) {
.row .push-s4 {
left: 33.3333333333%;
}
}
@media (min-width: 0) {
.row .pull-s4 {
right: 33.3333333333%;
}
}
@media (min-width: 0) {
.row .add-s5 {
margin-left: 41.6666666667%;
}
}
@media (min-width: 0) {
.row .sub-s5 {
margin-right: 41.6666666667%;
}
}
@media (min-width: 0) {
.row .push-s5 {
left: 41.6666666667%;
}
}
@media (min-width: 0) {
.row .pull-s5 {
right: 41.6666666667%;
}
}
@media (min-width: 0) {
.row .add-s6 {
margin-left: 50%;
}
}
@media (min-width: 0) {
.row .sub-s6 {
margin-right: 50%;
}
}
@media (min-width: 0) {
.row .push-s6 {
left: 50%;
}
}
@media (min-width: 0) {
.row .pull-s6 {
right: 50%;
}
}
@media (min-width: 0) {
.row .add-s7 {
margin-left: 58.3333333333%;
}
}
@media (min-width: 0) {
.row .sub-s7 {
margin-right: 58.3333333333%;
}
}
@media (min-width: 0) {
.row .push-s7 {
left: 58.3333333333%;
}
}
@media (min-width: 0) {
.row .pull-s7 {
right: 58.3333333333%;
}
}
@media (min-width: 0) {
.row .add-s8 {
margin-left: 66.6666666667%;
}
}
@media (min-width: 0) {
.row .sub-s8 {
margin-right: 66.6666666667%;
}
}
@media (min-width: 0) {
.row .push-s8 {
left: 66.6666666667%;
}
}
@media (min-width: 0) {
.row .pull-s8 {
right: 66.6666666667%;
}
}
@media (min-width: 0) {
.row .add-s9 {
margin-left: 75%;
}
}
@media (min-width: 0) {
.row .sub-s9 {
margin-right: 75%;
}
}
@media (min-width: 0) {
.row .push-s9 {
left: 75%;
}
}
@media (min-width: 0) {
.row .pull-s9 {
right: 75%;
}
}
@media (min-width: 0) {
.row .add-s10 {
margin-left: 83.3333333333%;
}
}
@media (min-width: 0) {
.row .sub-s10 {
margin-right: 83.3333333333%;
}
}
@media (min-width: 0) {
.row .push-s10 {
left: 83.3333333333%;
}
}
@media (min-width: 0) {
.row .pull-s10 {
right: 83.3333333333%;
}
}
@media (min-width: 0) {
.row .add-s11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 0) {
.row .sub-s11 {
margin-right: 91.6666666667%;
}
}
@media (min-width: 0) {
.row .push-s11 {
left: 91.6666666667%;
}
}
@media (min-width: 0) {
.row .pull-s11 {
right: 91.6666666667%;
}
}
@media (min-width: 0) {
.row .add-s12 {
margin-left: 100%;
}
}
@media (min-width: 0) {
.row .sub-s12 {
margin-right: 100%;
}
}
@media (min-width: 0) {
.row .push-s12 {
left: 100%;
}
}
@media (min-width: 0) {
.row .pull-s12 {
right: 100%;
}
}
@media (min-width: 600px) {
.row .add-m1 {
margin-left: 8.3333333333%;
}
}
@media (min-width: 600px) {
.row .sub-m1 {
margin-right: 8.3333333333%;
}
}
@media (min-width: 600px) {
.row .push-m1 {
left: 8.3333333333%;
}
}
@media (min-width: 600px) {
.row .pull-m1 {
right: 8.3333333333%;
}
}
@media (min-width: 600px) {
.row .add-m2 {
margin-left: 16.6666666667%;
}
}
@media (min-width: 600px) {
.row .sub-m2 {
margin-right: 16.6666666667%;
}
}
@media (min-width: 600px) {
.row .push-m2 {
left: 16.6666666667%;
}
}
@media (min-width: 600px) {
.row .pull-m2 {
right: 16.6666666667%;
}
}
@media (min-width: 600px) {
.row .add-m3 {
margin-left: 25%;
}
}
@media (min-width: 600px) {
.row .sub-m3 {
margin-right: 25%;
}
}
@media (min-width: 600px) {
.row .push-m3 {
left: 25%;
}
}
@media (min-width: 600px) {
.row .pull-m3 {
right: 25%;
}
}
@media (min-width: 600px) {
.row .add-m4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 600px) {
.row .sub-m4 {
margin-right: 33.3333333333%;
}
}
@media (min-width: 600px) {
.row .push-m4 {
left: 33.3333333333%;
}
}
@media (min-width: 600px) {
.row .pull-m4 {
right: 33.3333333333%;
}
}
@media (min-width: 600px) {
.row .add-m5 {
margin-left: 41.6666666667%;
}
}
@media (min-width: 600px) {
.row .sub-m5 {
margin-right: 41.6666666667%;
}
}
@media (min-width: 600px) {
.row .push-m5 {
left: 41.6666666667%;
}
}
@media (min-width: 600px) {
.row .pull-m5 {
right: 41.6666666667%;
}
}
@media (min-width: 600px) {
.row .add-m6 {
margin-left: 50%;
}
}
@media (min-width: 600px) {
.row .sub-m6 {
margin-right: 50%;
}
}
@media (min-width: 600px) {
.row .push-m6 {
left: 50%;
}
}
@media (min-width: 600px) {
.row .pull-m6 {
right: 50%;
}
}
@media (min-width: 600px) {
.row .add-m7 {
margin-left: 58.3333333333%;
}
}
@media (min-width: 600px) {
.row .sub-m7 {
margin-right: 58.3333333333%;
}
}
@media (min-width: 600px) {
.row .push-m7 {
left: 58.3333333333%;
}
}
@media (min-width: 600px) {
.row .pull-m7 {
right: 58.3333333333%;
}
}
@media (min-width: 600px) {
.row .add-m8 {
margin-left: 66.6666666667%;
}
}
@media (min-width: 600px) {
.row .sub-m8 {
margin-right: 66.6666666667%;
}
}
@media (min-width: 600px) {
.row .push-m8 {
left: 66.6666666667%;
}
}
@media (min-width: 600px) {
.row .pull-m8 {
right: 66.6666666667%;
}
}
@media (min-width: 600px) {
.row .add-m9 {
margin-left: 75%;
}
}
@media (min-width: 600px) {
.row .sub-m9 {
margin-right: 75%;
}
}
@media (min-width: 600px) {
.row .push-m9 {
left: 75%;
}
}
@media (min-width: 600px) {
.row .pull-m9 {
right: 75%;
}
}
@media (min-width: 600px) {
.row .add-m10 {
margin-left: 83.3333333333%;
}
}
@media (min-width: 600px) {
.row .sub-m10 {
margin-right: 83.3333333333%;
}
}
@media (min-width: 600px) {
.row .push-m10 {
left: 83.3333333333%;
}
}
@media (min-width: 600px) {
.row .pull-m10 {
right: 83.3333333333%;
}
}
@media (min-width: 600px) {
.row .add-m11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 600px) {
.row .sub-m11 {
margin-right: 91.6666666667%;
}
}
@media (min-width: 600px) {
.row .push-m11 {
left: 91.6666666667%;
}
}
@media (min-width: 600px) {
.row .pull-m11 {
right: 91.6666666667%;
}
}
@media (min-width: 600px) {
.row .add-m12 {
margin-left: 100%;
}
}
@media (min-width: 600px) {
.row .sub-m12 {
margin-right: 100%;
}
}
@media (min-width: 600px) {
.row .push-m12 {
left: 100%;
}
}
@media (min-width: 600px) {
.row .pull-m12 {
right: 100%;
}
}
@media (min-width: 992px) {
.row .add-l1 {
margin-left: 8.3333333333%;
}
}
@media (min-width: 992px) {
.row .sub-l1 {
margin-right: 8.3333333333%;
}
}
@media (min-width: 992px) {
.row .push-l1 {
left: 8.3333333333%;
}
}
@media (min-width: 992px) {
.row .pull-l1 {
right: 8.3333333333%;
}
}
@media (min-width: 992px) {
.row .add-l2 {
margin-left: 16.6666666667%;
}
}
@media (min-width: 992px) {
.row .sub-l2 {
margin-right: 16.6666666667%;
}
}
@media (min-width: 992px) {
.row .push-l2 {
left: 16.6666666667%;
}
}
@media (min-width: 992px) {
.row .pull-l2 {
right: 16.6666666667%;
}
}
@media (min-width: 992px) {
.row .add-l3 {
margin-left: 25%;
}
}
@media (min-width: 992px) {
.row .sub-l3 {
margin-right: 25%;
}
}
@media (min-width: 992px) {
.row .push-l3 {
left: 25%;
}
}
@media (min-width: 992px) {
.row .pull-l3 {
right: 25%;
}
}
@media (min-width: 992px) {
.row .add-l4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 992px) {
.row .sub-l4 {
margin-right: 33.3333333333%;
}
}
@media (min-width: 992px) {
.row .push-l4 {
left: 33.3333333333%;
}
}
@media (min-width: 992px) {
.row .pull-l4 {
right: 33.3333333333%;
}
}
@media (min-width: 992px) {
.row .add-l5 {
margin-left: 41.6666666667%;
}
}
@media (min-width: 992px) {
.row .sub-l5 {
margin-right: 41.6666666667%;
}
}
@media (min-width: 992px) {
.row .push-l5 {
left: 41.6666666667%;
}
}
@media (min-width: 992px) {
.row .pull-l5 {
right: 41.6666666667%;
}
}
@media (min-width: 992px) {
.row .add-l6 {
margin-left: 50%;
}
}
@media (min-width: 992px) {
.row .sub-l6 {
margin-right: 50%;
}
}
@media (min-width: 992px) {
.row .push-l6 {
left: 50%;
}
}
@media (min-width: 992px) {
.row .pull-l6 {
right: 50%;
}
}
@media (min-width: 992px) {
.row .add-l7 {
margin-left: 58.3333333333%;
}
}
@media (min-width: 992px) {
.row .sub-l7 {
margin-right: 58.3333333333%;
}
}
@media (min-width: 992px) {
.row .push-l7 {
left: 58.3333333333%;
}
}
@media (min-width: 992px) {
.row .pull-l7 {
right: 58.3333333333%;
}
}
@media (min-width: 992px) {
.row .add-l8 {
margin-left: 66.6666666667%;
}
}
@media (min-width: 992px) {
.row .sub-l8 {
margin-right: 66.6666666667%;
}
}
@media (min-width: 992px) {
.row .push-l8 {
left: 66.6666666667%;
}
}
@media (min-width: 992px) {
.row .pull-l8 {
right: 66.6666666667%;
}
}
@media (min-width: 992px) {
.row .add-l9 {
margin-left: 75%;
}
}
@media (min-width: 992px) {
.row .sub-l9 {
margin-right: 75%;
}
}
@media (min-width: 992px) {
.row .push-l9 {
left: 75%;
}
}
@media (min-width: 992px) {
.row .pull-l9 {
right: 75%;
}
}
@media (min-width: 992px) {
.row .add-l10 {
margin-left: 83.3333333333%;
}
}
@media (min-width: 992px) {
.row .sub-l10 {
margin-right: 83.3333333333%;
}
}
@media (min-width: 992px) {
.row .push-l10 {
left: 83.3333333333%;
}
}
@media (min-width: 992px) {
.row .pull-l10 {
right: 83.3333333333%;
}
}
@media (min-width: 992px) {
.row .add-l11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 992px) {
.row .sub-l11 {
margin-right: 91.6666666667%;
}
}
@media (min-width: 992px) {
.row .push-l11 {
left: 91.6666666667%;
}
}
@media (min-width: 992px) {
.row .pull-l11 {
right: 91.6666666667%;
}
}
@media (min-width: 992px) {
.row .add-l12 {
margin-left: 100%;
}
}
@media (min-width: 992px) {
.row .sub-l12 {
margin-right: 100%;
}
}
@media (min-width: 992px) {
.row .push-l12 {
left: 100%;
}
}
@media (min-width: 992px) {
.row .pull-l12 {
right: 100%;
}
}
@media (min-width: 1200px) {
.row .add-xl1 {
margin-left: 8.3333333333%;
}
}
@media (min-width: 1200px) {
.row .sub-xl1 {
margin-right: 8.3333333333%;
}
}
@media (min-width: 1200px) {
.row .push-xl1 {
left: 8.3333333333%;
}
}
@media (min-width: 1200px) {
.row .pull-xl1 {
right: 8.3333333333%;
}
}
@media (min-width: 1200px) {
.row .add-xl2 {
margin-left: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.row .sub-xl2 {
margin-right: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.row .push-xl2 {
left: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.row .pull-xl2 {
right: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.row .add-xl3 {
margin-left: 25%;
}
}
@media (min-width: 1200px) {
.row .sub-xl3 {
margin-right: 25%;
}
}
@media (min-width: 1200px) {
.row .push-xl3 {
left: 25%;
}
}
@media (min-width: 1200px) {
.row .pull-xl3 {
right: 25%;
}
}
@media (min-width: 1200px) {
.row .add-xl4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 1200px) {
.row .sub-xl4 {
margin-right: 33.3333333333%;
}
}
@media (min-width: 1200px) {
.row .push-xl4 {
left: 33.3333333333%;
}
}
@media (min-width: 1200px) {
.row .pull-xl4 {
right: 33.3333333333%;
}
}
@media (min-width: 1200px) {
.row .add-xl5 {
margin-left: 41.6666666667%;
}
}
@media (min-width: 1200px) {
.row .sub-xl5 {
margin-right: 41.6666666667%;
}
}
@media (min-width: 1200px) {
.row .push-xl5 {
left: 41.6666666667%;
}
}
@media (min-width: 1200px) {
.row .pull-xl5 {
right: 41.6666666667%;
}
}
@media (min-width: 1200px) {
.row .add-xl6 {
margin-left: 50%;
}
}
@media (min-width: 1200px) {
.row .sub-xl6 {
margin-right: 50%;
}
}
@media (min-width: 1200px) {
.row .push-xl6 {
left: 50%;
}
}
@media (min-width: 1200px) {
.row .pull-xl6 {
right: 50%;
}
}
@media (min-width: 1200px) {
.row .add-xl7 {
margin-left: 58.3333333333%;
}
}
@media (min-width: 1200px) {
.row .sub-xl7 {
margin-right: 58.3333333333%;
}
}
@media (min-width: 1200px) {
.row .push-xl7 {
left: 58.3333333333%;
}
}
@media (min-width: 1200px) {
.row .pull-xl7 {
right: 58.3333333333%;
}
}
@media (min-width: 1200px) {
.row .add-xl8 {
margin-left: 66.6666666667%;
}
}
@media (min-width: 1200px) {
.row .sub-xl8 {
margin-right: 66.6666666667%;
}
}
@media (min-width: 1200px) {
.row .push-xl8 {
left: 66.6666666667%;
}
}
@media (min-width: 1200px) {
.row .pull-xl8 {
right: 66.6666666667%;
}
}
@media (min-width: 1200px) {
.row .add-xl9 {
margin-left: 75%;
}
}
@media (min-width: 1200px) {
.row .sub-xl9 {
margin-right: 75%;
}
}
@media (min-width: 1200px) {
.row .push-xl9 {
left: 75%;
}
}
@media (min-width: 1200px) {
.row .pull-xl9 {
right: 75%;
}
}
@media (min-width: 1200px) {
.row .add-xl10 {
margin-left: 83.3333333333%;
}
}
@media (min-width: 1200px) {
.row .sub-xl10 {
margin-right: 83.3333333333%;
}
}
@media (min-width: 1200px) {
.row .push-xl10 {
left: 83.3333333333%;
}
}
@media (min-width: 1200px) {
.row .pull-xl10 {
right: 83.3333333333%;
}
}
@media (min-width: 1200px) {
.row .add-xl11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.row .sub-xl11 {
margin-right: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.row .push-xl11 {
left: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.row .pull-xl11 {
right: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.row .add-xl12 {
margin-left: 100%;
}
}
@media (min-width: 1200px) {
.row .sub-xl12 {
margin-right: 100%;
}
}
@media (min-width: 1200px) {
.row .push-xl12 {
left: 100%;
}
}
@media (min-width: 1200px) {
.row .pull-xl12 {
right: 100%;
}
}
Raw
flex.min.css
.row{box-sizing:border-box;display:flex;flex-wrap:wrap;margin-bottom:1em}.row.reverse{flex-direction:row-reverse}.row.align-v-center{align-items:center}.row.align-v-bottom{align-items:end}.row.align-h-center{justify-content:center}.row.align-h-right{justify-content:flex-end}.row [class*=col],.row [class*="s"],.row [class*="m"],.row [class*="l"],.row [class*=xl]{box-sizing:border-box;flex-basis:0;flex-shrink:0;position:relative;flex-grow:1;width:100%}@media (max-width:599.99px){.row [class*=col],.row [class*="s"],.row [class*="m"],.row [class*="l"],.row [class*=xl]{flex-grow:0;flex-basis:100%;width:100%}}.row [class*=col]:nth-of-type(1),.row [class*="s"]:nth-of-type(1),.row [class*="m"]:nth-of-type(1),.row [class*="l"]:nth-of-type(1),.row [class*=xl]:nth-of-type(1){order:2}.row [class*=col]:nth-of-type(2),.row [class*="s"]:nth-of-type(2),.row [class*="m"]:nth-of-type(2),.row [class*="l"]:nth-of-type(2),.row [class*=xl]:nth-of-type(2){order:4}.row [class*=col]:nth-of-type(3),.row [class*="s"]:nth-of-type(3),.row [class*="m"]:nth-of-type(3),.row [class*="l"]:nth-of-type(3),.row [class*=xl]:nth-of-type(3){order:6}.row [class*=col]:nth-of-type(4),.row [class*="s"]:nth-of-type(4),.row [class*="m"]:nth-of-type(4),.row [class*="l"]:nth-of-type(4),.row [class*=xl]:nth-of-type(4){order:8}.row [class*=col]:nth-of-type(5),.row [class*="s"]:nth-of-type(5),.row [class*="m"]:nth-of-type(5),.row [class*="l"]:nth-of-type(5),.row [class*=xl]:nth-of-type(5){order:10}.row [class*=col]:nth-of-type(6),.row [class*="s"]:nth-of-type(6),.row [class*="m"]:nth-of-type(6),.row [class*="l"]:nth-of-type(6),.row [class*=xl]:nth-of-type(6){order:12}.row [class*=col]:nth-of-type(7),.row [class*="s"]:nth-of-type(7),.row [class*="m"]:nth-of-type(7),.row [class*="l"]:nth-of-type(7),.row [class*=xl]:nth-of-type(7){order:14}.row [class*=col]:nth-of-type(8),.row [class*="s"]:nth-of-type(8),.row [class*="m"]:nth-of-type(8),.row [class*="l"]:nth-of-type(8),.row [class*=xl]:nth-of-type(8){order:16}.row [class*=col]:nth-of-type(9),.row [class*="s"]:nth-of-type(9),.row [class*="m"]:nth-of-type(9),.row [class*="l"]:nth-of-type(9),.row [class*=xl]:nth-of-type(9){order:18}.row [class*=col]:nth-of-type(10),.row [class*="s"]:nth-of-type(10),.row [class*="m"]:nth-of-type(10),.row [class*="l"]:nth-of-type(10),.row [class*=xl]:nth-of-type(10){order:20}.row [class*=col]:nth-of-type(11),.row [class*="s"]:nth-of-type(11),.row [class*="m"]:nth-of-type(11),.row [class*="l"]:nth-of-type(11),.row [class*=xl]:nth-of-type(11){order:22}.row [class*=col]:nth-of-type(12),.row [class*="s"]:nth-of-type(12),.row [class*="m"]:nth-of-type(12),.row [class*="l"]:nth-of-type(12),.row [class*=xl]:nth-of-type(12){order:24}.row [class*=col]:nth-of-type(13),.row [class*="s"]:nth-of-type(13),.row [class*="m"]:nth-of-type(13),.row [class*="l"]:nth-of-type(13),.row [class*=xl]:nth-of-type(13){order:26}.row [class*=col]:nth-of-type(14),.row [class*="s"]:nth-of-type(14),.row [class*="m"]:nth-of-type(14),.row [class*="l"]:nth-of-type(14),.row [class*=xl]:nth-of-type(14){order:28}.row [class*=col]:nth-of-type(15),.row [class*="s"]:nth-of-type(15),.row [class*="m"]:nth-of-type(15),.row [class*="l"]:nth-of-type(15),.row [class*=xl]:nth-of-type(15){order:30}.row [class*=col]:nth-of-type(16),.row [class*="s"]:nth-of-type(16),.row [class*="m"]:nth-of-type(16),.row [class*="l"]:nth-of-type(16),.row [class*=xl]:nth-of-type(16){order:32}.row [class*=col]:nth-of-type(17),.row [class*="s"]:nth-of-type(17),.row [class*="m"]:nth-of-type(17),.row [class*="l"]:nth-of-type(17),.row [class*=xl]:nth-of-type(17){order:34}.row [class*=col]:nth-of-type(18),.row [class*="s"]:nth-of-type(18),.row [class*="m"]:nth-of-type(18),.row [class*="l"]:nth-of-type(18),.row [class*=xl]:nth-of-type(18){order:36}@media (min-width:0){.row .ord-s1{order:1!important}.row .ord-s2{order:3!important}.row .ord-s3{order:5!important}.row .ord-s4{order:7!important}.row .ord-s5{order:9!important}.row .ord-s6{order:11!important}.row .ord-s7{order:13!important}.row .ord-s8{order:15!important}.row .ord-s9{order:17!important}.row .ord-s10{order:19!important}.row .ord-s11{order:21!important}.row .ord-s12{order:23!important}.row .ord-s13{order:25!important}.row .ord-s14{order:27!important}.row .ord-s15{order:29!important}.row .ord-s16{order:31!important}.row .ord-s17{order:33!important}.row .ord-s18{order:35!important}.row .s1{flex-grow:0;flex-basis:8.3333333333%;width:8.3333333333%}.row .s2{flex-grow:0;flex-basis:16.6666666667%;width:16.6666666667%}.row .s3{flex-grow:0;flex-basis:25%;width:25%}.row .s4{flex-grow:0;flex-basis:33.3333333333%;width:33.3333333333%}.row .s5{flex-grow:0;flex-basis:41.6666666667%;width:41.6666666667%}.row .s6{flex-grow:0;flex-basis:50%;width:50%}.row .s7{flex-grow:0;flex-basis:58.3333333333%;width:58.3333333333%}.row .s8{flex-grow:0;flex-basis:66.6666666667%;width:66.6666666667%}.row .s9{flex-grow:0;flex-basis:75%;width:75%}.row .s10{flex-grow:0;flex-basis:83.3333333333%;width:83.3333333333%}.row .s11{flex-grow:0;flex-basis:91.6666666667%;width:91.6666666667%}.row .s12{flex-grow:0;flex-basis:100%;width:100%}.row .add-s1{margin-left:8.3333333333%}.row .sub-s1{margin-right:8.3333333333%}.row .push-s1{left:8.3333333333%}.row .pull-s1{right:8.3333333333%}.row .add-s2{margin-left:16.6666666667%}.row .sub-s2{margin-right:16.6666666667%}.row .push-s2{left:16.6666666667%}.row .pull-s2{right:16.6666666667%}.row .add-s3{margin-left:25%}.row .sub-s3{margin-right:25%}.row .push-s3{left:25%}.row .pull-s3{right:25%}.row .add-s4{margin-left:33.3333333333%}.row .sub-s4{margin-right:33.3333333333%}.row .push-s4{left:33.3333333333%}.row .pull-s4{right:33.3333333333%}.row .add-s5{margin-left:41.6666666667%}.row .sub-s5{margin-right:41.6666666667%}.row .push-s5{left:41.6666666667%}.row .pull-s5{right:41.6666666667%}.row .add-s6{margin-left:50%}.row .sub-s6{margin-right:50%}.row .push-s6{left:50%}.row .pull-s6{right:50%}.row .add-s7{margin-left:58.3333333333%}.row .sub-s7{margin-right:58.3333333333%}.row .push-s7{left:58.3333333333%}.row .pull-s7{right:58.3333333333%}.row .add-s8{margin-left:66.6666666667%}.row .sub-s8{margin-right:66.6666666667%}.row .push-s8{left:66.6666666667%}.row .pull-s8{right:66.6666666667%}.row .add-s9{margin-left:75%}.row .sub-s9{margin-right:75%}.row .push-s9{left:75%}.row .pull-s9{right:75%}.row .add-s10{margin-left:83.3333333333%}.row .sub-s10{margin-right:83.3333333333%}.row .push-s10{left:83.3333333333%}.row .pull-s10{right:83.3333333333%}.row .add-s11{margin-left:91.6666666667%}.row .sub-s11{margin-right:91.6666666667%}.row .push-s11{left:91.6666666667%}.row .pull-s11{right:91.6666666667%}.row .add-s12{margin-left:100%}.row .sub-s12{margin-right:100%}.row .push-s12{left:100%}.row .pull-s12{right:100%}}@media (min-width:600px){.row .ord-m1{order:1!important}.row .ord-m2{order:3!important}.row .ord-m3{order:5!important}.row .ord-m4{order:7!important}.row .ord-m5{order:9!important}.row .ord-m6{order:11!important}.row .ord-m7{order:13!important}.row .ord-m8{order:15!important}.row .ord-m9{order:17!important}.row .ord-m10{order:19!important}.row .ord-m11{order:21!important}.row .ord-m12{order:23!important}.row .ord-m13{order:25!important}.row .ord-m14{order:27!important}.row .ord-m15{order:29!important}.row .ord-m16{order:31!important}.row .ord-m17{order:33!important}.row .ord-m18{order:35!important}.row .m1{flex-grow:0;flex-basis:8.3333333333%;width:8.3333333333%}.row .m2{flex-grow:0;flex-basis:16.6666666667%;width:16.6666666667%}.row .m3{flex-grow:0;flex-basis:25%;width:25%}.row .m4{flex-grow:0;flex-basis:33.3333333333%;width:33.3333333333%}.row .m5{flex-grow:0;flex-basis:41.6666666667%;width:41.6666666667%}.row .m6{flex-grow:0;flex-basis:50%;width:50%}.row .m7{flex-grow:0;flex-basis:58.3333333333%;width:58.3333333333%}.row .m8{flex-grow:0;flex-basis:66.6666666667%;width:66.6666666667%}.row .m9{flex-grow:0;flex-basis:75%;width:75%}.row .m10{flex-grow:0;flex-basis:83.3333333333%;width:83.3333333333%}.row .m11{flex-grow:0;flex-basis:91.6666666667%;width:91.6666666667%}.row .m12{flex-grow:0;flex-basis:100%;width:100%}.row .add-m1{margin-left:8.3333333333%}.row .sub-m1{margin-right:8.3333333333%}.row .push-m1{left:8.3333333333%}.row .pull-m1{right:8.3333333333%}.row .add-m2{margin-left:16.6666666667%}.row .sub-m2{margin-right:16.6666666667%}.row .push-m2{left:16.6666666667%}.row .pull-m2{right:16.6666666667%}.row .add-m3{margin-left:25%}.row .sub-m3{margin-right:25%}.row .push-m3{left:25%}.row .pull-m3{right:25%}.row .add-m4{margin-left:33.3333333333%}.row .sub-m4{margin-right:33.3333333333%}.row .push-m4{left:33.3333333333%}.row .pull-m4{right:33.3333333333%}.row .add-m5{margin-left:41.6666666667%}.row .sub-m5{margin-right:41.6666666667%}.row .push-m5{left:41.6666666667%}.row .pull-m5{right:41.6666666667%}.row .add-m6{margin-left:50%}.row .sub-m6{margin-right:50%}.row .push-m6{left:50%}.row .pull-m6{right:50%}.row .add-m7{margin-left:58.3333333333%}.row .sub-m7{margin-right:58.3333333333%}.row .push-m7{left:58.3333333333%}.row .pull-m7{right:58.3333333333%}.row .add-m8{margin-left:66.6666666667%}.row .sub-m8{margin-right:66.6666666667%}.row .push-m8{left:66.6666666667%}.row .pull-m8{right:66.6666666667%}.row .add-m9{margin-left:75%}.row .sub-m9{margin-right:75%}.row .push-m9{left:75%}.row .pull-m9{right:75%}.row .add-m10{margin-left:83.3333333333%}.row .sub-m10{margin-right:83.3333333333%}.row .push-m10{left:83.3333333333%}.row .pull-m10{right:83.3333333333%}.row .add-m11{margin-left:91.6666666667%}.row .sub-m11{margin-right:91.6666666667%}.row .push-m11{left:91.6666666667%}.row .pull-m11{right:91.6666666667%}.row .add-m12{margin-left:100%}.row .sub-m12{margin-right:100%}.row .push-m12{left:100%}.row .pull-m12{right:100%}}@media (min-width:992px){.row .ord-l1{order:1!important}.row .ord-l2{order:3!important}.row .ord-l3{order:5!important}.row .ord-l4{order:7!important}.row .ord-l5{order:9!important}.row .ord-l6{order:11!important}.row .ord-l7{order:13!important}.row .ord-l8{order:15!important}.row .ord-l9{order:17!important}.row .ord-l10{order:19!important}.row .ord-l11{order:21!important}.row .ord-l12{order:23!important}.row .ord-l13{order:25!important}.row .ord-l14{order:27!important}.row .ord-l15{order:29!important}.row .ord-l16{order:31!important}.row .ord-l17{order:33!important}.row .ord-l18{order:35!important}.row .l1{flex-grow:0;flex-basis:8.3333333333%;width:8.3333333333%}.row .l2{flex-grow:0;flex-basis:16.6666666667%;width:16.6666666667%}.row .l3{flex-grow:0;flex-basis:25%;width:25%}.row .l4{flex-grow:0;flex-basis:33.3333333333%;width:33.3333333333%}.row .l5{flex-grow:0;flex-basis:41.6666666667%;width:41.6666666667%}.row .l6{flex-grow:0;flex-basis:50%;width:50%}.row .l7{flex-grow:0;flex-basis:58.3333333333%;width:58.3333333333%}.row .l8{flex-grow:0;flex-basis:66.6666666667%;width:66.6666666667%}.row .l9{flex-grow:0;flex-basis:75%;width:75%}.row .l10{flex-grow:0;flex-basis:83.3333333333%;width:83.3333333333%}.row .l11{flex-grow:0;flex-basis:91.6666666667%;width:91.6666666667%}.row .l12{flex-grow:0;flex-basis:100%;width:100%}.row .add-l1{margin-left:8.3333333333%}.row .sub-l1{margin-right:8.3333333333%}.row .push-l1{left:8.3333333333%}.row .pull-l1{right:8.3333333333%}.row .add-l2{margin-left:16.6666666667%}.row .sub-l2{margin-right:16.6666666667%}.row .push-l2{left:16.6666666667%}.row .pull-l2{right:16.6666666667%}.row .add-l3{margin-left:25%}.row .sub-l3{margin-right:25%}.row .push-l3{left:25%}.row .pull-l3{right:25%}.row .add-l4{margin-left:33.3333333333%}.row .sub-l4{margin-right:33.3333333333%}.row .push-l4{left:33.3333333333%}.row .pull-l4{right:33.3333333333%}.row .add-l5{margin-left:41.6666666667%}.row .sub-l5{margin-right:41.6666666667%}.row .push-l5{left:41.6666666667%}.row .pull-l5{right:41.6666666667%}.row .add-l6{margin-left:50%}.row .sub-l6{margin-right:50%}.row .push-l6{left:50%}.row .pull-l6{right:50%}.row .add-l7{margin-left:58.3333333333%}.row .sub-l7{margin-right:58.3333333333%}.row .push-l7{left:58.3333333333%}.row .pull-l7{right:58.3333333333%}.row .add-l8{margin-left:66.6666666667%}.row .sub-l8{margin-right:66.6666666667%}.row .push-l8{left:66.6666666667%}.row .pull-l8{right:66.6666666667%}.row .add-l9{margin-left:75%}.row .sub-l9{margin-right:75%}.row .push-l9{left:75%}.row .pull-l9{right:75%}.row .add-l10{margin-left:83.3333333333%}.row .sub-l10{margin-right:83.3333333333%}.row .push-l10{left:83.3333333333%}.row .pull-l10{right:83.3333333333%}.row .add-l11{margin-left:91.6666666667%}.row .sub-l11{margin-right:91.6666666667%}.row .push-l11{left:91.6666666667%}.row .pull-l11{right:91.6666666667%}.row .add-l12{margin-left:100%}.row .sub-l12{margin-right:100%}.row .push-l12{left:100%}.row .pull-l12{right:100%}}@media (min-width:1200px){.row .ord-xl1{order:1!important}.row .ord-xl2{order:3!important}.row .ord-xl3{order:5!important}.row .ord-xl4{order:7!important}.row .ord-xl5{order:9!important}.row .ord-xl6{order:11!important}.row .ord-xl7{order:13!important}.row .ord-xl8{order:15!important}.row .ord-xl9{order:17!important}.row .ord-xl10{order:19!important}.row .ord-xl11{order:21!important}.row .ord-xl12{order:23!important}.row .ord-xl13{order:25!important}.row .ord-xl14{order:27!important}.row .ord-xl15{order:29!important}.row .ord-xl16{order:31!important}.row .ord-xl17{order:33!important}.row .ord-xl18{order:35!important}.row .xl1{flex-grow:0;flex-basis:8.3333333333%;width:8.3333333333%}.row .xl2{flex-grow:0;flex-basis:16.6666666667%;width:16.6666666667%}.row .xl3{flex-grow:0;flex-basis:25%;width:25%}.row .xl4{flex-grow:0;flex-basis:33.3333333333%;width:33.3333333333%}.row .xl5{flex-grow:0;flex-basis:41.6666666667%;width:41.6666666667%}.row .xl6{flex-grow:0;flex-basis:50%;width:50%}.row .xl7{flex-grow:0;flex-basis:58.3333333333%;width:58.3333333333%}.row .xl8{flex-grow:0;flex-basis:66.6666666667%;width:66.6666666667%}.row .xl9{flex-grow:0;flex-basis:75%;width:75%}.row .xl10{flex-grow:0;flex-basis:83.3333333333%;width:83.3333333333%}.row .xl11{flex-grow:0;flex-basis:91.6666666667%;width:91.6666666667%}.row .xl12{flex-grow:0;flex-basis:100%;width:100%}.row .add-xl1{margin-left:8.3333333333%}.row .sub-xl1{margin-right:8.3333333333%}.row .push-xl1{left:8.3333333333%}.row .pull-xl1{right:8.3333333333%}.row .add-xl2{margin-left:16.6666666667%}.row .sub-xl2{margin-right:16.6666666667%}.row .push-xl2{left:16.6666666667%}.row .pull-xl2{right:16.6666666667%}.row .add-xl3{margin-left:25%}.row .sub-xl3{margin-right:25%}.row .push-xl3{left:25%}.row .pull-xl3{right:25%}.row .add-xl4{margin-left:33.3333333333%}.row .sub-xl4{margin-right:33.3333333333%}.row .push-xl4{left:33.3333333333%}.row .pull-xl4{right:33.3333333333%}.row .add-xl5{margin-left:41.6666666667%}.row .sub-xl5{margin-right:41.6666666667%}.row .push-xl5{left:41.6666666667%}.row .pull-xl5{right:41.6666666667%}.row .add-xl6{margin-left:50%}.row .sub-xl6{margin-right:50%}.row .push-xl6{left:50%}.row .pull-xl6{right:50%}.row .add-xl7{margin-left:58.3333333333%}.row .sub-xl7{margin-right:58.3333333333%}.row .push-xl7{left:58.3333333333%}.row .pull-xl7{right:58.3333333333%}.row .add-xl8{margin-left:66.6666666667%}.row .sub-xl8{margin-right:66.6666666667%}.row .push-xl8{left:66.6666666667%}.row .pull-xl8{right:66.6666666667%}.row .add-xl9{margin-left:75%}.row .sub-xl9{margin-right:75%}.row .push-xl9{left:75%}.row .pull-xl9{right:75%}.row .add-xl10{margin-left:83.3333333333%}.row .sub-xl10{margin-right:83.3333333333%}.row .push-xl10{left:83.3333333333%}.row .pull-xl10{right:83.3333333333%}.row .add-xl11{margin-left:91.6666666667%}.row .sub-xl11{margin-right:91.6666666667%}.row .push-xl11{left:91.6666666667%}.row .pull-xl11{right:91.6666666667%}.row .add-xl12{margin-left:100%}.row .sub-xl12{margin-right:100%}.row .push-xl12{left:100%}.row .pull-xl12{right:100%}}
Raw
flex.scss
/* Variables - Add to your variable file */
$device-s: 0;
$device-m: 600px;
$device-l: 992px;
$device-xl: 1200px;
$breakpoints: s m l xl;
/* Functions - Add to your function file */
@function getSizeFor($point-name) {
@if ($point-name == "s") {
@return $device-s;
} @else if ($point-name == "m") {
@return $device-m;
} @else if ($point-name == "l") {
@return $device-l;
} @else if ($point-name == "xl") {
@return $device-xl;
}
}
/* Style - Add to your function grid file */
.row {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
&.reverse {
flex-direction: row-reverse;
}
&.align-v-center {
align-items: center;
}
&.align-v-bottom {
align-items: end;
}
&.align-h-center {
justify-content: center;
}
&.align-h-right {
justify-content: flex-end;
}
[class*="col"],
[class*="s"],
[class*="m"],
[class*="l"],
[class*="xl"] {
box-sizing: border-box;
flex-basis: 0;
flex-grow: 0;
flex-shrink: 0;
position: relative;
flex-grow: 1;
width: 100%;
@media (max-width: $device-m - 0.01) {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@for $i from 1 through 18 {
&:nth-of-type(#{$i}) {
order: $i * 2;
}
}
}
@each $point in $breakpoints {
@for $i from 1 through 18 {
.ord-#{$point}#{$i} {
@media (min-width: getSizeFor($point)) {
order: ($i * 2) - 1 !important;
}
}
}
}
@each $point in $breakpoints {
@for $i from 1 through 12 {
.#{$point}#{$i} {
@media (min-width: getSizeFor($point)) {
flex-grow: 0;
flex-basis: 100% * $i / 12;
width: 100% * $i / 12;
}
}
}
}
@each $point in $breakpoints {
@for $i from 1 through 12 {
.add-#{$point}#{$i} {
@media (min-width: getSizeFor($point)) {
margin-left: 100% * $i / 12;
}
}
.sub-#{$point}#{$i} {
@media (min-width: getSizeFor($point)) {
margin-right: 100% * $i / 12;
}
}
.push-#{$point}#{$i} {
@media (min-width: getSizeFor($point)) {
left: 100% * $i / 12;
}
}
.pull-#{$point}#{$i} {
@media (min-width: getSizeFor($point)) {
right: 100% * $i / 12;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment