Flexbox & Grid
Utilities for controlling how an individual grid item is aligned along its inline axis.
Class | Styles |
---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-end | justify-self: end; |
justify-self-center | justify-self: center; |
justify-self-stretch | justify-self: stretch; |
Use justify-self-auto
to align an item based on the value of the grid's justify-items
property:
Use justify-self-start
to align a grid item to the start of its inline axis:
Use justify-self-center
to align a grid item along the center of its inline axis:
Use justify-self-end
to align a grid item to the end of its inline axis:
Use justify-self-stretch
to stretch a grid item to fill the grid area on its inline axis:
Prefix a justify-self
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="justify-self-start md:justify-self-end ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.