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.
Using variants
Using :hover
variants such as h:jc-*
allows you to override elements and change their values when hovering over them.