Justify Content
Controls the positioning of flex and grid elements on a container’s main axis.
| Class | Properties |
|---|---|
| jc-c | justify-content: center; |
| jc-fe | justify-content: flex-end; |
| jc-fs | justify-content: flex-start; |
| jc-n | justify-content: normal; |
| jc-s | justify-content: stretch; |
| jc-sb | justify-content: space-between; |
| jc-sa | justify-content: space-around; |
| jc-se | justify-content: space-evenly; |
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-n md:jc-fs ..."></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-n h:jc-fs ..."></div>