Docs / Flex Direction

Flex Direction

vel-src: flexbox.css

Utilities for controlling the direction of flex items.

ClassProperties
vel-flex-rowflex-direction: row
vel-flex-row-reverseflex-direction: row-reverse
vel-flex-colflex-direction: column
vel-flex-col-reverseflex-direction: column-reverse

Examples

Row (default)

1
2
3
example.html
<div class="vel-flex vel-flex-row vel-gap-3">
  <div class="vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">1</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">2</div>
  <div class="vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">3</div>
</div>

Column

1
2
3
example.html
<div class="vel-flex vel-flex-col vel-gap-3" style="width:fit-content">
  <div class="vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 32px">1</div>
  <div class="vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 32px">2</div>
  <div class="vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 32px">3</div>
</div>

Row Reverse

1
2
3
example.html
<div class="vel-flex vel-flex-row-reverse vel-gap-3">
  <div class="vel-bg-danger vel-text-white vel-rounded-md" style="padding:10px 18px">1</div>
  <div class="vel-bg-danger vel-text-white vel-rounded-md" style="padding:10px 18px">2</div>
  <div class="vel-bg-danger vel-text-white vel-rounded-md" style="padding:10px 18px">3</div>
</div>