Flex

Flex utility classes let you quickly build layouts using CSS Flexbox properties.

Use Cases

Horizontal Layouts

<div class="ro-u-flex ro-u-flex-row ro-u-p-2 ro-u-gap-2">
<button class="ro-btn ro-color-scheme-product">Cancel</button>
<button class="ro-btn ro-color-scheme-product ro-variant-outlined">Save</button>
</div>

Preview

Vertical Stacking

<div class="ro-u-flex ro-u-flex-column ro-u-p-2 ro-u-gap-2">
<div class="ro-u-bg-product-light ro-u-p-1">Item 1</div>
<div class="ro-u-bg-danger-light ro-u-p-1">Item 2</div>
<div class="ro-u-bg-success-light ro-u-p-1">Item 3</div>
</div>

Preview

Item 1

Item 2

Item 3

Gaps Between Items

You can use the .ro-u-gap-* utility classes to add spacing between flex items. Basic gap is 2 (8px). You can check all gaps in Gutters.

<div class="ro-u-flex ro-u-p-2 ro-u-gap-2">
<div class="ro-card ro-border ro-u-bg-product ro-u-text-white">Home</div>
<div class="ro-card ro-border ro-u-bg-danger ro-u-text-white">About</div>
<div class="ro-card ro-border ro-u-bg-success ro-u-text-white">Contact</div>
</div>

Preview

Home

About

Contact

Centering Content

<div class="ro-u-flex ro-u-flex-center ro-u-bg-black ro-u-p-4 ro-u-mb-xl ro-u-min-h-1">
<span class="ro-u-text-white">Centered content</span>
</div>

Preview

Centered content

Responsive Wrapping

<div class="ro-u-flex ro-u-flex-wrap ro-u-p-2 ro-u-gap-2" style="max-width: 240px;">
<div class="ro-u-bg-warning ro-u-text-white ro-u-p-1">Tag 1</div>
<div class="ro-u-bg-danger ro-u-text-white ro-u-p-1">Tag 2</div>
<div class="ro-u-bg-danger ro-u-text-white ro-u-p-1">Tag 3</div>
<div class="ro-u-bg-success ro-u-text-white ro-u-p-1">Tag 4</div>
</div>

Preview

Tag 1

Tag 2

Tag 3

Tag 4

Space Distribution

<div class="ro-u-flex ro-u-justify-between ro-u-p-2" style="width: 240px;">
<span class="ro-u-bg-product ro-u-p-1 ro-u-text-white">Left</span>
<span class="ro-u-bg-danger ro-u-p-1 ro-u-text-white">Right</span>
</div>

Preview

LeftRight

Flexible Sizing

<div class="ro-u-flex ro-u-p-2" style="width: 240px;">
<div class="ro-u-bg-danger ro-u-p-1">Fixed</div>
<div class="ro-u-flex-1 ro-u-bg-success-light ro-u-p-1">Flexible</div>
</div>

Preview

Fixed

Flexible

Properties

Display

Class	Description
`.ro-u-flex`	Display flex
`.ro-u-inline-flex`	Display inline-flex

Direction

Class	Description
`.ro-u-flex-row`	Flex direction row
`.ro-u-flex-row-reverse`	Flex direction row-reverse
`.ro-u-flex-column`	Flex direction column
`.ro-u-flex-column-reverse`	Flex direction column-reverse

Wrap

Class	Description
`.ro-u-flex-wrap`	Flex wrap
`.ro-u-flex-wrap-reverse`	Flex wrap reverse
`.ro-u-flex-nowrap`	No flex wrap

Justify Content

Class	Description
`.ro-u-justify-start`	Justify content flex-start
`.ro-u-justify-end`	Justify content flex-end
`.ro-u-justify-center`	Justify content center
`.ro-u-justify-between`	Justify content space-between
`.ro-u-justify-around`	Justify content space-around
`.ro-u-justify-evenly`	Justify content space-evenly

Align Items

Class	Description
`.ro-u-items-start`	Align items flex-start
`.ro-u-items-end`	Align items flex-end
`.ro-u-items-center`	Align items center
`.ro-u-items-baseline`	Align items baseline
`.ro-u-items-stretch`	Align items stretch

Align Content

Class	Description
`.ro-u-content-start`	Align content flex-start
`.ro-u-content-end`	Align content flex-end
`.ro-u-content-center`	Align content center
`.ro-u-content-between`	Align content space-between
`.ro-u-content-around`	Align content space-around
`.ro-u-content-stretch`	Align content stretch

Align Self

Class	Description
`.ro-u-self-auto`	Align self auto
`.ro-u-self-start`	Align self flex-start
`.ro-u-self-end`	Align self flex-end
`.ro-u-self-center`	Align self center
`.ro-u-self-baseline`	Align self baseline
`.ro-u-self-stretch`	Align self stretch

Flex Grow / Shrink

Class	Description
`.ro-u-flex-grow-0`	Flex grow 0
`.ro-u-flex-grow-1`	Flex grow 1
`.ro-u-flex-shrink-0`	Flex shrink 0
`.ro-u-flex-shrink-1`	Flex shrink 1

Flex Basis

Class	Description
`.ro-u-basis-auto`	Flex basis auto
`.ro-u-basis-full`	Flex basis 100%
`.ro-u-basis-half`	Flex basis 50%

Helpers

Class	Description
`.ro-u-flex-1`	flex: 1
`.ro-u-flex-auto`	flex: auto
`.ro-u-flex-center`	Center horizontally and vertically