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

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

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

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

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

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

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

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

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

  /* /// */

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

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

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