---
title: Justify Content
position: 20
seo_title: Telerik and Kendo UI Justify Content Utilities
seo_description: Use the Telerik and Kendo UI Justify Content Utilities
  to control how the flex and grid content will be aligned along the main axis.
---
## 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.

<CSSRulesList data='{"id":"justify-content"}'></CSSRulesList>

### Stretch

Use the `k-justify-content-stretch` utility to stretch the items equally within the entire container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/stretch","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### Center

Use the `k-justify-content-center` utility to align the items in the center of the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/center","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### Start

Use the `k-justify-content-start` utility to align the items in the center of the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/start","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### End

Use the `k-justify-content-end` utility to align the items in the center of the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/end","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### Normal

Use the `k-justify-content-normal` utility to align the items at their default positions when no `justify-content` value is set.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/normal","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/between","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/around","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/justify-content/evenly","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-p-5 k-rounded-lg"}}'></LiveDemo>