↕️ Flex direction

The flex-direction utility lets you control the direction in which flex items are placed inside a flex container. It supports both static and responsive variants generated through mixins and loops.

🧱 Naming convention

All classes follow this structure:

.u--flex-direction-{value}
.u--flex-direction-{breakpoint}-{value}

✅ When to use

Use this utility when:

• You’re using display: flex and need to control the direction of child elements
• You want to toggle between row, column, or reverse directions
• You need responsive direction changes without writing custom styles

NOTE!

This utility must be applied to a container with display: flex.

🧪 Responsive usage

This utility supports responsive variants, using breakpoint prefixes like: desktop, laptop, tabletl, tabletm, tablets, mobile.

✅ How to use

You can apply them directly in HTML:

<div class="u--display-flex u--flex-direction-column u--flex-direction-tabletl-row">
  <div>Item A</div>
  <div>Item B</div>
</div>

Or extend them in SCSS if you have a custom class:

.c--card-a {
  @extend .u--display-flex;
  @extend .u--flex-direction-column;
  @extend .u--flex-direction-tabletl-row;
}