style-forge.media/src/mobile/flex.css

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

@media only screen and (max-width: 600px) {
  .\@mob\:d\:f, .\@mob\:d\:f\:x, .\@mob\:d\:f\:y { display: flex; flex-wrap: wrap }

  .\@mob\:d\:f\:x { flex-direction: row }
  .\@mob\:d\:f\:y { flex-direction: column }

  .\@mob\:wrap { flex-wrap: wrap }
  .\@mob\:nowrap { flex-wrap: nowrap }

  .\@mob\:reverse, .\@mob\:reverse.d\:f\:x, .\@mob\:reverse.d\:f\:y { flex-wrap: wrap-reverse }
  .\@mob\:reverse { flex-direction: row-reverse }
  .\@mob\:reverse\:x, .\@mob\:reverse.d\:f\:x { flex-direction: row-reverse }
  .\@mob\:reverse\:y, .\@mob\:reverse.d\:f\:y { flex-direction: column-reverse }
  .\@mob\:reverse\:wrap { flex-wrap: wrap-reverse }

  .\@mob\:grow\:i, .\@mob\:\$grow\:i > * { flex-grow: inherit }
  .\@mob\:grow\:ii, .\@mob\:\$grow\:ii > * { flex-grow: initial }
  .\@mob\:grow\:0, .\@mob\:\$grow\:0 > * { flex-grow: 0 }
  .\@mob\:grow\:1, .\@mob\:\$grow\:1 > * { flex-grow: 1 }
  .\@mob\:grow\:2, .\@mob\:\$grow\:2 > * { flex-grow: 2 }
  .\@mob\:grow\:3, .\@mob\:\$grow\:3 > * { flex-grow: 3 }
  .\@mob\:grow\:4, .\@mob\:\$grow\:4 > * { flex-grow: 4 }
  .\@mob\:grow\:5, .\@mob\:\$grow\:5 > * { flex-grow: 5 }

  .\@mob\:shrink\:i, .\@mob\:\$shrink\:i > * { flex-shrink: inherit }
  .\@mob\:shrink\:ii, .\@mob\:\$shrink\:ii > * { flex-shrink: initial }
  .\@mob\:shrink\:0, .\@mob\:\$shrink\:0 > * { flex-shrink: 0 }
  .\@mob\:shrink\:1, .\@mob\:\$shrink\:1 > * { flex-shrink: 1 }
  .\@mob\:shrink\:2, .\@mob\:\$shrink\:2 > * { flex-shrink: 2 }
  .\@mob\:shrink\:3, .\@mob\:\$shrink\:3 > * { flex-shrink: 3 }
  .\@mob\:shrink\:4, .\@mob\:\$shrink\:4 > * { flex-shrink: 4 }
  .\@mob\:shrink\:5, .\@mob\:\$shrink\:5 > * { flex-shrink: 5 }

  .\@mob\:basis\:i, .\@mob\:\$basis\:i > * { flex-basis: inherit }
  .\@mob\:basis\:ii, .\@mob\:\$basis\:ii > * { flex-basis: initial }
  .\@mob\:basis\:0, .\@mob\:\$basis\:0 > * { flex-basis: 0 }
  .\@mob\:basis\:10, .\@mob\:\$basis\:10 > * { flex-basis: 10% }
  .\@mob\:basis\:20, .\@mob\:\$basis\:20 > * { flex-basis: 20% }
  .\@mob\:basis\:25, .\@mob\:\$basis\:25 > * { flex-basis: 25% }
  .\@mob\:basis\:33, .\@mob\:\$basis\:33 > * { flex-basis: 33.3333% }
  .\@mob\:basis\:50, .\@mob\:\$basis\:50 > * { flex-basis: 50% }
  .\@mob\:basis\:100, .\@mob\:\$basis\:100 > * { flex-basis: 100% }
  .\@mob\:basis\:auto, .\@mob\:\$basis\:auto > * { flex-basis: auto }
  .\@mob\:basis\:available, .\@mob\:\$basis\:available > * { flex-basis: available }
  .\@mob\:basis\:bb, .\@mob\:\$basis\:bb > * { flex-basis: border-box }
  .\@mob\:basis\:cb, .\@mob\:\$basis\:cb > * { flex-basis: content-box }
  .\@mob\:basis\:c, .\@mob\:\$basis\:c > * { flex-basis: content }
  .\@mob\:basis\:fc, .\@mob\:\$basis\:fc > * { flex-basis: fit-content }
  .\@mob\:basis\:max, .\@mob\:\$basis\:max > * { flex-basis: max-content }
  .\@mob\:basis\:min, .\@mob\:\$basis\:min > * { flex-basis: min-content }

  /* /// */

  html.grid .\@mob\:d\:f, html.grid .\@mob\:d\:f\:x, html.grid .\@mob\:d\:f\:y { display: flex }

  html.flex .\@mob\:d\:f, html.flex .\@mob\:d\:f\:x, html.flex .\@mob\:d\:f\:y { display: block; letter-spacing: -1em !important }
  html.flex .\@mob\:d\:f > *, html.flex .\@mob\:d\:f\:x > *, html.flex .\@mob\:d\:f\:y > * { letter-spacing: normal; vertical-align: top }
  html.flex .\@mob\:d\:f > *, html.flex .\@mob\:d\:f\:x > * { display: inline-block }
  html.flex .\@mob\:d\:f\:y > * { display: block }

  html.flex .d\:f > .\@mob\:d\:f, html.flex .d\:f > .\@mob\:d\:f\:x, html.flex .d\:f > .\@mob\:d\:f\:y,
  html.flex .\@mob\:d\:f > .d\:f, html.flex .\@mob\:d\:f > .d\:f\:x, html.flex .\@mob\:d\:f > .d\:f\:y,
  html.flex .\@mob\:d\:g > .d\:f, html.flex .\@mob\:d\:g > .d\:f\:x, html.flex .\@mob\:d\:g > .d\:f\:y,
  html.flex .\@mob\:d\:f > .\@mob\:d\:f, html.flex .\@mob\:d\:f > .\@mob\:d\:f\:x, html.flex .\@mob\:d\:f > .\@mob\:d\:f\:y,
  html.flex .\@mob\:d\:g > .\@mob\:d\:f, html.flex .\@mob\:d\:g > .\@mob\:d\:f\:x, html.flex .\@mob\:d\:g > .\@mob\:d\:f\:y,
  html.flex .d\:f\:x > .\@mob\:d\:f, html.flex .d\:f\:x > .\@mob\:d\:f\:x, html.flex .d\:f\:x > .\@mob\:d\:f\:y,
  html.flex .d\:g\:x > .\@mob\:d\:f, html.flex .d\:g\:x > .\@mob\:d\:f\:x, html.flex .d\:g\:x > .\@mob\:d\:f\:y,
  html.flex .\@mob\:d\:f\:x > .d\:f, html.flex .\@mob\:d\:f\:x > .d\:f\:x, html.flex .\@mob\:d\:f\:x > .d\:f\:y,
  html.flex .\@mob\:d\:g\:x > .d\:f, html.flex .\@mob\:d\:g\:x > .d\:f\:x, html.flex .\@mob\:d\:g\:x > .d\:f\:y,
  html.flex .\@mob\:d\:f\:x > .\@mob\:d\:f, html.flex .\@mob\:d\:f\:x > .\@mob\:d\:f\:x, html.flex .\@mob\:d\:f\:x > .\@mob\:d\:f\:y,
  html.flex .\@mob\:d\:g\:x > .\@mob\:d\:f, html.flex .\@mob\:d\:g\:x > .\@mob\:d\:f\:x, html.flex .\@mob\:d\:g\:x > .\@mob\:d\:f\:y
  { display: inline-block }
}