---
title: Align Content
position: 17
seo_title: Telerik and Kendo UI Align Content Utilities
seo_description: Use the Telerik and Kendo UI Align Content Utilities to control
  how the flex and grid content will be aligned along the cross axis.
---
## Align Content

The Telerik and Kendo UI Align Content Utilities are CSS classes that enable you to control how the element's children will be aligned along the cross axis.

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

### Stretch

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

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

### Center

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

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

### Start

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

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

### End

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

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

### Normal

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

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

### Space Between

Use the `k-align-content-between` utility to distribute the items with an equal space between them within the container along the cross axis.

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

### Space Around

Use the `k-align-content-around` utility to distribute the items with an equal space around them within the container along the cross axis.

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

### Space Evenly

Use the `k-align-content-evenly` utility to distribute items with an equal space between them within the container along the cross axis. The same space appears before the first and after the last item.

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