🧮 Justify content

The justify-content utility lets you control the horizontal alignment of flex items inside a flex container. It supports both static and responsive variants generated through mixins and loops.

🧱 Naming convention

.u--justify-content-{value}
.u--justify-content-{breakpoint}-{value}

✅ When to use

Use this utility when:

• You’re using display: flex and need to control horizontal alignment of items
• You need different alignment behaviors across breakpoints

NOTE!

Make sure the parent container has display: flex for justify-content to work.

🧪 Responsive usage

This utility supports responsive variants, using breakpoint prefixes like: desktop, laptop, tabletl, tabletm, tablets, mobile.

✅ How to use

You can apply them directly in HTML:

<div class="u--display-flex u--justify-content-space-between u--justify-content-tabletm-center">
  <div>Item A</div>
  <div>Item B</div>
</div>

Or extend them in SCSS if you have a custom class:

.c--card-a {
    @extend .u--display-flex;
    @extend .u--justify-content-space-between;
    @extend .u--justify-content-tabletm-center;
}