Utilities: flex

Display

The display property has no responsive variants.

.au-u-flex
.au-u-flex--inline

Wrap

.au-u-flex--wrap
.au-u-flex--no-wrap

Spacing

.au-u-flex--spaced
.au-u-flex--spaced-tiny
.au-u-flex--spaced-small
.au-u-flex--spaced-large

Alignment

.au-u-flex--row
.au-u-flex--column
.au-u-flex--row-reverse
.au-u-flex--column-reverse
.au-u-flex--start
.au-u-flex--center
.au-u-flex--between
.au-u-flex--around
.au-u-flex--end
.au-u-flex--vertical-start
.au-u-flex--vertical-end
.au-u-flex--vertical-center
.au-u-flex--vertical-baseline

Responsive

To enable the responsive classes set $au-flex-utilities-responsive: true;. By default the responsive classes are not generated.

Each flex utility can be made responsive by adding a breakpoint extension.

.au-u-flex--start@xsmall
.au-u-flex--start@small
.au-u-flex--start@medium
.au-u-flex--start@large