---
title: Flex Direction
position: 2
seo_title: Telerik and Kendo UI Flex Direction Utilities
seo_description: Use the Telerik and Kendo UI Flex Direction Utilities to
  control the placing direction of the flex items in a flex container.
---

## Flex Direction

The Telerik and Kendo UI Flex Direction Utilities are CSS utility classes that enable you to control placing direction of the flex items in a flex container.

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

### Row

Use the `k-flex-row` utility to place the items in the same direction as the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/flex-direction/row","height":150,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-d-flex k-justify-content-center k-align-items-center k-flex-basis-16 k-p-4 k-rounded-lg"}}'></LiveDemo>

### Row Reverse

Use the `k-flex-row-reverse` utility to place the items in the opposite direction of the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/flex-direction/row-reverse","height":150,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-d-flex k-justify-content-center k-align-items-center k-flex-basis-16 k-p-4 k-rounded-lg"}}'></LiveDemo>

### Column

Use the `k-flex-column` utility to place the items in the same direction as the cross axis.

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

### Column Reverse

Use the `k-flex-column-reverse` utility to place the items in the opposite direction of the cross axis.

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

### Breakpoints

The responsive Flex Direction utility classes let you control the placement direction of flex items in a flex container on different screens. Each class includes a base name, a breakpoint identifier (`xs`, `sm`, `md`, `lg`, `xl`, or `xxl`), and a value or modifier.

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