Flex

Set flexbox behavior

Overview #

Use the flex utilities to set the flex CSS properties of an element.

Examples #

Choose an example

<div class="rvt-flex">
  <div class="rvt-grow-1 rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item One</div>
  </div>
  <div class="rvt-grow-1 rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item Two</div>
  </div>
  <div class="rvt-grow-1 rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item Three</div>
  </div>
  <div class="rvt-grow-1 rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item Four</div>
  </div>
  <div class="rvt-grow-1 rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item Five</div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-flex rvt-justify-space-between">
  <div class="rvt-bg-blue-100">Item one</div>
  <div class="rvt-bg-blue-100">Item two</div>
  <div class="rvt-bg-blue-100">Item three</div>
</div>

Open in new window Copy link to example

<div class="rvt-flex">
  <div class="rvt-grow-1 rvt-items-center rvt-bg-green-100 rvt-m-right-sm">
    <div>Item One</div>
  </div>
  <div class="rvt-items-center rvt-bg-blue-100">
    <div>Item Two</div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-flex">
  <div class="rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item One</div>
  </div>
  <div class="rvt-grow-1 rvt-items-center rvt-bg-green-100 rvt-m-right-sm">
    <div>Item Two</div>
  </div>
  <div class="rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item Five</div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-flex">
  <div class="rvt-items-center rvt-bg-blue-100 rvt-m-right-sm">
    <div>Item One</div>
  </div>
  <div class="rvt-grow-1 rvt-items-center rvt-bg-green-100">
    <div>Item Two</div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-flex rvt-p-tb-sm rvt-p-lr-md rvt-border-top rvt-border-bottom">
  <div class="rvt-flex rvt-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M1 3a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm3 1h11V2H4v2Zm11 5H4V7h11v2ZM1 8a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm14 6H4v-2h11v2ZM1 13a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z"/></svg>
    <span class="rvt-m-left-xs">List view</span>
  </div>
  <div class="rvt-flex rvt-items-center rvt-m-left-md">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M7 0H0v7h7V0ZM2 5V2h3v3H2Zm14-5H9v7h7V0Zm-5 5V2h3v3h-3ZM9 9h7v7H9V9Zm2 2v3h3v-3h-3ZM7 9H0v7h7V9Zm-5 5v-3h3v3H2Z"/></svg>
    <span class="rvt-m-left-xs">Grid view</span>
  </div>
  <div class="rvt-flex rvt-items-center rvt-grow-1 rvt-justify-end rvt-m-left-md">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>  <path d="M5 1.5A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1.304l1.13-.652a1.5 1.5 0 0 1 2.048.549l1.5 2.598a1.5 1.5 0 0 1-.549 2.05L14 8l1.13.652a1.5 1.5 0 0 1 .548 2.049l-1.5 2.598a1.5 1.5 0 0 1-2.049.55L11 13.195V14.5A1.5 1.5 0 0 1 9.5 16h-3A1.5 1.5 0 0 1 5 14.5v-1.304l-1.13.652a1.5 1.5 0 0 1-2.048-.549l-1.5-2.598a1.5 1.5 0 0 1 .549-2.05L2 8 .87 7.348A1.5 1.5 0 0 1 .323 5.3l1.5-2.598a1.5 1.5 0 0 1 2.049-.55L5 2.805V1.5ZM7 2v1.67c0 .169-.027.329-.076.476a3.996 3.996 0 0 0-1.722.996 1.513 1.513 0 0 1-.452-.173l-1.446-.835-1 1.732 1.446.835c.146.084.271.188.375.304a4.007 4.007 0 0 0 0 1.99c-.104.116-.229.22-.375.304l-1.446.835 1 1.732 1.446-.835a1.52 1.52 0 0 1 .452-.173 3.995 3.995 0 0 0 1.722.996c.05.147.076.307.076.476V14h2v-1.67c0-.169.027-.329.076-.476a3.995 3.995 0 0 0 1.722-.996c.153.032.305.088.452.173l1.446.835 1-1.732-1.446-.835a1.514 1.514 0 0 1-.375-.304 4.007 4.007 0 0 0 0-1.99c.104-.116.229-.22.375-.304l1.446-.835-1-1.732-1.446.835a1.514 1.514 0 0 1-.452.173 3.996 3.996 0 0 0-1.722-.996A1.513 1.513 0 0 1 9 3.67V2H7Z"/></svg>
    <span class="rvt-m-left-xs">Settings</span>
  </div>
</div>

Usage #

These utilities take advantage of CSS flexbox and are designed to be used when fine-tuning the layout of items at the individual component level.

The flex utilities come with CSS classes for most flex properties, but not all.

Because we have designed these utilities to be generic, we have intentionally left out flex properties that require specific knowledge of how many items live in a given flex container (e.g. order), as we’d be unable to create utility classes that would cover every likely combination. We’ve left out properties that set the widths of flex children (e.g. flex-basis) for similar reasons.

Responsive flex utilities #

All of the flex utilities have responsive variants that correspond to Rivet’s standard breakpoints. Adding the breakpoint suffix -<breakpoint name>-up will cause the flex utility to start working at that breakpoint screen size and larger:

*-sm-up
*-md-up
*-lg-up
*-xl-up
*-xxl-up

<div class="rvt-flex-md-up rvt-justify-space-between-lg-up">
  <!-- ... -->
</div>

Flex container utilities #

A flex container is generally the parent element to which you would apply the display: flex; property. The flex utilities have CSS classes for most of the flex container properties available in the flexbox model.

The following flex container CSS utility classes are available:

flex, flex-direction, and flex-wrap #

See the documentation on the Mozilla Developer Network (MDN) for more information about the flex, flex-direction, and flex-wrap properties.

.rvt-flex
.rvt-inline-flex
.rvt-flex-row
.rvt-flex-row-reverse
.rvt-flex-column
.rvt-flex-column-reverse
.rvt-wrap
.rvt-no-wrap
.rvt-wrap-reverse

justify-content #

See the documentation on MDN for more information about the justify-content property.

.rvt-justify-start
.rvt-justify-end
.rvt-justify-center
.rvt-justify-space-between
.rvt-justify-space-around
.rvt-justify-space-evenly

align-content #

See the documentation on MDN for more information about the align-content property.

.rvt-content-start
.rvt-content-end
.rvt-content-center
.rvt-content-stretch
.rvt-content-baseline

align-items #

See the documentation on MDN for more information about the align-items property.

.rvt-items-start
.rvt-items-end
.rvt-items-center
.rvt-items-stretch
.rvt-items-baseline

Flex item utilities #

A flex item is generally the direct child of any flex container. The flex utilities have CSS classes for most of the flex item properties in the flexbox model.

The following flex item CSS utility classes are available:

flex-shrink and flex-grow #

See the documentation on MDN for more information about the flex-shrink and flex-grow properties.

.rvt-shrink-1
.rvt-shrink-0
.rvt-grow-1
.rvt-grow-0

align-self #

See the documentation on MDN for more information about the align-self property.

.rvt-self-start
.rvt-self-end
.rvt-center-end
.rvt-stretch-end
.rvt-baseline-end