Flex Direction

Class	Properties
fd-c	flex-direction: column;
fd-cr	flex-direction: column-reverse;
fd-r	flex-direction: row;
fd-rr	flex-direction: row-reverse;

Column

This example sets the flex direction to column. The items will be arranged vertically in a single column.

A

B

C

<div class="p-r">
  <div class="fd-c s-y-4 tc-white">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">A</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">B</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">C</div>
  </div>
</div>

Column Reverse

This example sets the flex direction to column-reverse. The items will be arranged vertically in a single column, but in reverse order.

A

B

C

<div class="p-r">
  <div class="fd-cr s-y-4 tc-white">
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">A</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">B</div>
    <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">C</div>
  </div>
</div>

Row

This example sets the flex direction to row. The items will be arranged horizontally in a single row.

A

B

C

<div class="p-r">
  <div class="cg-4 d-f fd-r tc-white">
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-1">A</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-1">B</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-1">C</div>
  </div>
</div>

Row Reverse

This example sets the flex direction to row-reverse. The items will be arranged horizontally in a single row, but in reverse order.

A

B

C

<div class="p-r">
  <div class="cg-4 d-f fd-rr tc-white">
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-1">A</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-1">B</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-1">C</div>
  </div>
</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

You can combine responsive breakpoints like sm:fd-*,md:fd-*, lg:fd-*, and xxl:fd-* allows targeting specific utilities in different viewports.

<div class="fd-c md:fd-r ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

Alternatively, you can apply :hover by using h:fd-* utility to override elements and change their values when hovering over them.

<div class="fd-c h:fd-r ..."></div>