Flex

With this global modifier, a block can be flexed and the various flex settings can be applied to both the block and its child element (see flex items below). A detailed flex guide with its properties can be found here.

INFO The flex items do not have to be set, they are optional.

Flex Container

The structure of the class names are:

• .flex see display, set display: flex;
• .flex-{SCREEN_SIZE} until the screen size
• .flex--inline see display, set display: inline-flex;
• .flex--inline-{SCREEN_SIZE} until the screen size
• .flex--row see flex-direction
• .flex--row-{SCREEN_SIZE} until the screen size
• .flex--row-reverse see flex-direction
• .flex--row-reverse-{SCREEN_SIZE} until the screen size
• .flex--col see flex-direction
• .flex--col-{SCREEN_SIZE} until the screen size
• .flex--col-reverse see flex-direction
• .flex--col-reverse-{SCREEN_SIZE} until the screen size
• .flex--nowrap see flex-wrap
• .flex--nowrap-{SCREEN_SIZE} until the screen size
• .flex--wrap see flex-wrap
• .flex--wrap-{SCREEN_SIZE} until the screen size
• .flex--wrap-reverse see flex-wrap
• .flex--wrap-reverse-{SCREEN_SIZE} until the screen size
• .flex--horizontal-{HORIZONTAL} see justify-content
• .flex--horizontal-{HORIZONTAL}-{SCREEN_SIZE} until the screen size
• .flex--vertical-{VERTICAL} see align-items
• .flex--vertical-{VERTICAL}-{SCREEN_SIZE} until the screen size
• .flex--content-{CONTENT} see align-content
• .flex--content-{CONTENT}-{SCREEN_SIZE} until the screen size
• .flex--gap-{GAP} see gap, we only support gap
• .flex--gap-{GAP}-{SCREEN_SIZE} until the screen size
• .flex--center same to .flex--horizontal-center and .flex--vertical-center
• .flex--center-{SCREEN_SIZE} until the screen size

The values are:

• SCREEN_SIZE lg, md, sm, xs
• HORIZONTAL start, end, center, between, around, evenly
• VERTICAL stretch, start, end, center, baseline
• CONTENT start, end, center, between, around, evenly, stretch
• GAP 0.00, 0.25, 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00

DEPRECATED

The following modifiers should no longer be used:

• flex--content-space-between
• flex--content-space-between-{SCREEN_SIZE}
• flex--content-space-around
• flex--content-space-around-{SCREEN_SIZE}
• flex--content-space-evenly
• flex--content-space-evenly-{SCREEN_SIZE}

Flex Item

The follow describes the .flex__items element class, that can be set. It is direct children of the .flex block class. If you want to change a flex item, you have to use the item element class and the item modifier: e.g.:

<div class="flex">
  <p class="flex__item flex__item--grow-2">..<p/>
  <p class="flex__item flex__item--grow-1">..<p/>
</div>

The structure of the class names are:

• .flex__item this class sets all flex items properties to default
• .flex__item-{SCREEN_SIZE} until the screen size
• .flex__item--vertical-{VERTICAL} see align-self
• .flex__item--vertical-{VERTICAL}-{SCREEN_SIZE} until the screen size
• .flex__item--order-{ORDER} see order
• .flex__item--order-{ORDER}-{SCREEN_SIZE} until the screen size
• .flex__item--grow-{GROW} see grow
• .flex__item--grow-{GROW}-{SCREEN_SIZE} until the screen size

The values are:

• SCREEN_SIZE lg, md, sm, xs
• VERTICAL auto, start, end, center, baseline, stretch
• ORDER 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• GROW 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Example

Below we show several examples of how three buttons can be repositioned using the global modifier flex.