Skip to content

Justify Content

Controls the positioning of flex and grid elements on a container’s main axis.

Class Properties

jc-c

justify-content: center;

jc-s

justify-content: start;

jc-e

justify-content: end;

jc-fs

justify-content: flex-start;

jc-fe

justify-content: flex-end;

jc-l

justify-content: left;

jc-r

justify-content: right;

jc-n

justify-content: normal;

jc-sb

justify-content: space-between;

jc-sa

justify-content: space-around;

jc-se

justify-content: space-evenly;

jc-stretch

justify-content: stretch;

Using breakpoints

Using responsive breakpoints like sm:jc-*, md:jc-*, lg:jc-*, and xxl:jc-* allows targeting specific utilities in different viewports.

<div class="jc-l md:jc-r ..."></div>

Using variants

Using :hover variants such as h:jc-* allows you to override elements and change their values when hovering over them.

<div class="jc-l h:jc-r ..."></div>