@media CSS

Based on viewport size

Flexi generates a mobile-first responsive grid and responsive utilities using @media CSS queries based on the breakpoints defined in your config/flexi.js. The default breakpoints are xs, sm, md, and lg.

Attributes applied to a breakpoint will apply to all larger breakpoints unless the attribute is overridden by a similar attribute in a larger breakpoint.

The following responsive utilities are generated for a xs prefix:

CSS

/* wrapper class for container breakpoint */
.container-xs {}

/* the classes below are applied when the @media
 * breakpoint is true, or when within .container-xs */

.hidden-xs {
  display: none;
}

.visible-xs {
  display: initial;
}

.vertical-xs {
  flex-direction: column;
}

.horizontal-xs {
  flex-direction: row;
}

.wrap-xs {
  flex-wrap: wrap;
}

.nowrap-xs {
  flex-wrap: nowrap;
}

/* `.col-xs-1` ... `.col-xs-n` assuming columnPrefix in config/flexi.js is 'col'. */