---
title: Align Self
position: 18
seo_title: Telerik and Kendo UI Align Self Utilities
seo_description: Use the Telerik and Kendo UI Align Self Utilities to
  control how the item will be aligned along the cross axis.
---
## Align Self

The Telerik and Kendo UI Align Self Utilities are CSS utility classes that enable you to control how the item is aligned along the cross axis.

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

### Stretch

Use the `k-align-self-stretch` utility to stretch the item to fill the alignment container along the cross axis.

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

### Center

Use the `k-align-self-center` utility to center the item within the alignment container along the cross axis.

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

### Start

Use the `k-align-self-start` utility to align the item to the start of the container along the cross axis.

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

### End

Use the `k-align-self-end` utility to align the item to the end of the container along the cross axis.

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

### Baseline

Use the `k-align-self-baseline` utility to align the item to the baseline of the container along the cross axis.

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