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" viewBox="0 0 16 16">
      <title>List</title>
      <g fill="currentColor">
        <path d="M13,4H6A1,1,0,0,1,6,2h7a1,1,0,0,1,0,2Z" />
        <path d="M13,9H6A1,1,0,0,1,6,7h7a1,1,0,0,1,0,2Z" />
        <path d="M13,14H6a1,1,0,0,1,0-2h7a1,1,0,0,1,0,2Z" />
        <circle cx="3" cy="3" r="1" />
        <circle cx="3" cy="8" r="1" />
        <circle cx="3" cy="13" r="1" />
      </g>
    </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" viewBox="0 0 16 16">
      <title>Grid</title>
      <g fill="currentColor">
        <path d="M6,7H2A1,1,0,0,1,1,6V2A1,1,0,0,1,2,1H6A1,1,0,0,1,7,2V6A1,1,0,0,1,6,7ZM3,5H5V3H3Z" />
        <path d="M14,7H10A1,1,0,0,1,9,6V2a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1V6A1,1,0,0,1,14,7ZM11,5h2V3H11Z" />
        <path d="M6,15H2a1,1,0,0,1-1-1V10A1,1,0,0,1,2,9H6a1,1,0,0,1,1,1v4A1,1,0,0,1,6,15ZM3,13H5V11H3Z" />
        <path d="M14,15H10a1,1,0,0,1-1-1V10a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,14,15Zm-3-2h2V11H11Z" />
      </g>
    </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" viewBox="0 0 16 16">
      <title>Gear Icon</title>
      <path fill="currentColor" d="M13.94,8.78A6,6,0,0,0,14,8a6,6,0,0,0-.07-.9L15.73,6a7.94,7.94,0,0,0-.92-2.15l-2.06.52a6,6,0,0,0-1.2-1.18L12,1.1A7.94,7.94,0,0,0,9.87.23L8.78,2.06A6,6,0,0,0,8,2a6,6,0,0,0-.9.07L6,.27a7.94,7.94,0,0,0-2.15.92l.52,2.06a6,6,0,0,0-1.18,1.2L1.1,4A7.94,7.94,0,0,0,.23,6.13L2.06,7.22A6,6,0,0,0,2,8a6,6,0,0,0,.07.9L.27,10a7.94,7.94,0,0,0,.92,2.15l2.06-.52a6,6,0,0,0,1.2,1.18L4,14.9a7.94,7.94,0,0,0,2.17.87l1.09-1.83A6,6,0,0,0,8,14a6,6,0,0,0,.9-.07L10,15.73a7.94,7.94,0,0,0,2.15-.92l-.52-2.06a6,6,0,0,0,1.18-1.2L14.9,12a7.94,7.94,0,0,0,.87-2.17ZM8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11Z" />
    </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