Atomic Bulldog - UI/pattern library

1.11.4.1 - Align content

Source: atoms/modifiers/_flex.scss, line 129

Open in new window

Flex utilities helps to align flex content.

.is-align-{breakpoint}-{alignment value}, breakpoint is optional.

alignment value:

end
start
center
between
around

Examples:

Default styling

Parent .is-d-flex.[modifier]

.is-align-end

is-align-end

Parent .is-d-flex.is-align-end

.is-align-start

is-align-start

Parent .is-d-flex.is-align-start

.is-align-center

is-align-center

Parent .is-d-flex.is-align-center

.is-align-between

is-align-between

Parent .is-d-flex.is-align-between

.is-align-around

is-align-around

Parent .is-d-flex.is-align-around

<div class="is-d-flex [modifier]" style="height: 350px; border: 1px solid grey">
  <div class="kss-box" style="flex: 0 0 60px; height: auto">Parent .is-d-flex.[modifier]</div>
  <div class="kss-box" style="flex: 0 0 60px; height: auto">Parent .is-d-flex.[modifier]</div>
</div>