Justify Content
The Telerik and Kendo UI Justify Content Utilities are CSS utility classes that enable you to control how the element's children are aligned along the main axis.
| Utility Class | CSS Property |
|---|---|
.k-justify-content-normal | justify-content: normal; |
.k-justify-content-stretch | justify-content: stretch; |
.k-justify-content-center | justify-content: center; |
.k-justify-content-start | justify-content: start; |
.k-justify-content-end | justify-content: end; |
.k-justify-content-selft-start | justify-content: flex-start; |
.k-justify-content-self-end | justify-content: flex-end; |
.k-justify-content-baseline | justify-content: baseline; |
.k-justify-content-first-baseline | justify-content: first baseline; |
.k-justify-content-last-baseline | justify-content: last baseline; |
.k-justify-content-between | justify-content: space-between; |
.k-justify-content-around | justify-content: space-around; |
.k-justify-content-evenly | justify-content: space-evenly; |
Stretch
Use the k-justify-content-stretch utility to stretch the items equally within the entire container along the main axis.
Center
Use the k-justify-content-center utility to align the items in the center of the container along the main axis.
Start
Use the k-justify-content-start utility to align the items in the center of the container along the main axis.
End
Use the k-justify-content-end utility to align the items in the center of the container along the main axis.
Normal
Use the k-justify-content-normal utility to align the items at their default positions when no justify-content value is set.
Space Between
Use the k-justify-content-between utility to distribute the items with an equal space between them within the container along the main axis.
Space Around
Use the k-justify-content-around utility to distribute the items with an equal space around them within the container along the main axis.
Space Evenly
Use the k-justify-content-evenly utility to distribute items with an equal space between them within the container along the main axis. The same space appears before the first and after the last item.
