---
title: Flex
position: 4
seo_title: Telerik and Kendo UI Flex Utilities
seo_description: Use the Telerik and Kendo UI Flex Utilities to control
  how a flex items will grow and shrink.
---
## Flex

The Telerik and Kendo UI Flex Utilities are CSS utility classes that enable you to control how a flex item grows and shrinks.

<CSSRulesList data='{"id":"flex"}'></CSSRulesList>

### Initial

Use the `k-flex-initial` utility to set the initial value. The item will shrink to its smallest size and will not grow.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/flex/initial","height":200,"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>

### Auto

Use the `k-flex-auto` utility to shrink or expand the item to fit the container.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/flex/auto","height":200,"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>

### Flex 1

Use the `k-flex-1` utility to expand the item to fit the container.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/flex/flex-1","height":200,"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>

### None

Use the `k-flex-none` utility to prevent shrinking or expanding of the item. It will keep its initial width and height.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/flex/none","height":200,"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>