---
title: Flex Basis
position: 1
seo_title: Telerik and Kendo UI Flex Basis Utilities
seo_description: Use the Telerik and Kendo UI Flex Basis Utilities to control
  the initial main size of a flex item.
---
## Flex Basis

The Telerik and Kendo UI Flex Basis Utilities are CSS utility classes that enable you to control the initial main size of a flex item.

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

### Initial Main Size

Use the `k-flex-basis-{size}` utility to set the initial main size of a flex item.

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

### Auto Size

Use the `k-flex-basis-auto` to apply the initial size of a flex item.

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