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.
| Utility Class | CSS Property |
|---|---|
.k-flex-row | flex-direction: row; |
.k-flex-row-reverse | flex-direction: row-reverse; |
.k-flex-col | flex-direction: column; |
.k-flex-col-reverse | flex-direction: column-reverse; |
Row
Use the k-flex-row utility to place the items in the same direction as the main axis.
Row Reverse
Use the k-flex-row-reverse utility to place the items in the opposite direction of the main axis.
Column
Use the k-flex-column utility to place the items in the same direction as the cross axis.
Column Reverse
Use the k-flex-column-reverse utility to place the items in the opposite direction of the cross axis.
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.
| Utility Class | CSS Property |
|---|---|
.k-flex-{xs|sm|md|lg|xl|xxl}-row | flex-direction: row; |
.k-flex-{xs|sm|md|lg|xl|xxl}-row-reverse | flex-direction: row-reverse; |
.k-flex-{xs|sm|md|lg|xl|xxl}-col | flex-direction: column; |
.k-flex-{xs|sm|md|lg|xl|xxl}-col-reverse | flex-direction: column-reverse; |
