Flex Direction

Utilities for controlling the direction of flex items.

Class	Properties
.flex-row	flex-direction: row;
.flex-col	flex-direction: column;

Row

Use .flex-row to position flex items horizontally.

1

2

3

Column

Use .flex-col to position flex items vertically.

1

2

3

Responsive

To control the flex-direction at a specific breakpoint, add @{breakpoint} add the end of the utility class.

1

2

3

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.