Flex Direction

Controls the direction of flex elements.

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

Column

The main axis of the flex container is the same as the block axis.

A

B

C

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

Column Reverse

It is like a column, but the main start and main end are opposite the direction of the content.

A

B

C

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

Row

The main axis of the flex container is set to match the text direction.

A

B

C

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

Row Reverse

It is similar to row, but the main start and end points are opposite the direction of the content.

A

B

C

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

---

Using responsive modifiers

Using 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>

Using hover modifiers

Using :hover modifiers such as h:fd-* allows you to override elements and change their values when hovering over them.

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