Atomic Bulldog - UI/pattern library

1.11.4.2 - Justify content

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

Open in new window

Flex utilities helps to justify flex content.

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

alignment value:

end
start
center
between
around

Examples:

Default styling

Parent .is-d-flex.[modifier]

.is-justify-end

is-justify-end

Parent .is-d-flex.is-justify-end

.is-justify-start

is-justify-start

Parent .is-d-flex.is-justify-start

.is-justify-center

is-justify-center

Parent .is-d-flex.is-justify-center

.is-justify-between

is-justify-between

Parent .is-d-flex.is-justify-between

.is-justify-around

is-justify-around

Parent .is-d-flex.is-justify-around

<div class="is-d-flex [modifier]">
  <div class="kss-box" style="flex: 0 0 60px">Parent .is-d-flex.[modifier]</div>
  <div class="kss-box" style="flex: 0 0 60px">Parent .is-d-flex.[modifier]</div>
</div>