Flexbox Utilites

Flexbox utilities help layout a group of items in a single direction. A parent element with flexbox will position all of its direct child elements.

.fizz-flex-row

.fizz-flex-row applies display: flexbox to an element and aligns all of its direct children horizontally, with a 16px right margin applied to all but the last child element.

HTML 
<ul class="fizz-flex-row">
  <li><button class="fizz-button">Button 1</button></li>
  <li><button class="fizz-button">Button 2</button></li>
  <li><button class="fizz-button">Button 3</button></li>
</ul>

If you need more or less space between elements, you can append a number to .fizz-flex-row:

To create space with flex classes the gap utility classes can also be used.

.fizz-flex-row-inline

.fizz-flex-row-inline works just like .fizz-flex-row except it's an inline container instead of a block container. In most cases you'll just want .fizz-flex-row but if you find that your container is stretching to an uncomfortable width, you can try using .fizz-flex-row-inline.

.fizz-flex-row

.fizz-flex-row-inline

(Blue background added to illustrate the difference)

HTML 
<div class="fizz-flex-row-inline">
  <button class="fizz-button">Button 1</button>
  <button class="fizz-button">Button 2</button>
</div>

As with .fizz-flex-row, If you need more or less space between elements, you can append a number to .fizz-flex-row-inline:

.fizz-space-between

.fizz-space-between evenly distributes the remaining space between its child elements. You can use it to align two items on opposite sides of a container:

HTML 
<div class="fizz-space-between">
  <button class="fizz-button">Button 1</button>
  <button class="fizz-button">Button 2</button>
</div>

You can also use it on more than two items:

HTML 
<ul class="fizz-space-between">
  <li><button class="fizz-button">Button 1</button></li>
  <li><button class="fizz-button">Button 2</button></li>
  <li><button class="fizz-button">Button 3</button></li>
  <li><button class="fizz-button">Button 4</button></li>
  <li><button class="fizz-button">Button 5</button></li>
</ul>

.fizz-flex-row-responsive & .fizz-space-between-responsive

Adding -responsive to .fizz-flex-row or .fizz-space-between will do the same thing on larger viewports, but on small viewports the child elements will stack vertically and replace the horizontal margins with vertical margins.

HTML 
<ul class="fizz-flex-row-responsive">
  <li><button class="fizz-button">Button 1</button></li>
  <li><button class="fizz-button">Button 2</button></li>
  <li><button class="fizz-button">Button 3</button></li>
</ul>

If you're overriding the default spacing AND using -responsive, the number should go before -responsive:

.fizz-flex-vertical

If you want to set a flex container's flex direction to vertical, you can add .fizz-flex-vertical. Really the only time you'd want to use this is in conjunction with .fizz-space-between, setting a min-height on the element using an inline style. Otherwise, the default layout is vertical, so you don't need to enclose the content in a flex container.

This is flexed vertically

HTML 
<div class="fizz-space-between fizz-flex-vertical fizz-bordered fizz-inset-square-16"
     style="min-height: 200px">
  <p class="fizz-heading-3">This is flexed vertically</p>
  <button class="fizz-button-primary">Submit</button>
</div>

.fizz-flex-item

Sometimes you might have a group of items in a .fizz-flex-row where you want one or more items to take up more space than the others. You can apply .fizz-flex-item to a child of a .fizz-flex-row to make it take up any additional space.

HTML 
<ul class="fizz-flex-row">
  <li class="fizz-flex-item"><button class="fizz-button">Button 1</button></li>
  <li><button class="fizz-button">Button 2</button></li>
  <li><button class="fizz-button">Button 3</button></li>
  <li><button class="fizz-button">Button 4</button></li>
</ul>

Applying .fizz-flex-item to multiple child elements will divide the space equally.

HTML 
<ul class="fizz-flex-row">
  <li class="fizz-flex-item"><button class="fizz-button">Button 1</button></li>
  <li class="fizz-flex-item"><button class="fizz-button">Button 2</button></li>
  <li><button class="fizz-button">Button 3</button></li>
  <li><button class="fizz-button">Button 4</button></li>
</ul>

.fizz-flex-no-shrink

Sometimes you might have an element inside of a flex container that is unexpectedly shrinking (an image, for example). This is due to the default settings of flexbox children. You can prevent this by applying .fizz-flex-no-shrink.

Without .fizz-flex-no-shrink

Here's some example text that goes next to an image that could make the image shrink smaller than you'd like it to.

With .fizz-flex-no-shrink

Here's some example text that goes next to an image that could make the image shrink smaller than you'd like it to.

HTML 
<div class="fizz-flex-row-inline"
     style="max-width: 400px">
  <p>Here's some example text that goes next to an image that could make the image shrink smaller than you'd like it to.
  </p>
  <div class="fizz-flex-no-shrink">
    <img src="https://www.fillmurray.com/200/150">
  </div>
</div>

.fizz-justify-center/.fizz-justify-end

Fizz has utility classes that allow you to adjust the justification of children in a flex container. Items are left-justified by default but you can also center them or justify them to the right.

Here's an article that talks about the movement away from left/right/top/bottom towards start/end: Stop Using Left, Right, Top, and Bottom in Your CSS

HTML 
<div class="fizz-flex-row">
  <button class="fizz-button">Button 1</button>
  <button class="fizz-button">Button 2</button>
</div>

<div class="fizz-flex-row fizz-justify-center">
  <button class="fizz-button">Button 1</button>
  <button class="fizz-button">Button 2</button>
</div>

<div class="fizz-flex-row fizz-justify-end">
  <button class="fizz-button">Button 1</button>
  <button class="fizz-button">Button 2</button>
</div>

.fizz-align-content-[start/end]

Fizz flexbox classes will center all items vertically by default. To override this, you can add .fizz-align-content-start or .fizz-align-content-end to the flex container. You can also use .fizz-align-stretch to stretch the items to the height of the tallest flex item.

Here's some text that's a different height than the button.

Here's some text that's a different height than the button.

Here's some text that's a different height than the button.

Here's a card with some text.

Here's a card with more text Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, eos?

HTML 
<div class="fizz-flex-row">
  <button class="fizz-button">Button</button>
  <p>Here's some text that's a different height than the button.</p>
</div>

<div class="fizz-flex-row fizz-align-content-start">
  <button class="fizz-button">Button</button>
  <p>Here's some text that's a different height than the button.</p>
</div>

<div class="fizz-flex-row fizz-align-content-end">
  <button class="fizz-button">Button</button>
  <p>Here's some text that's a different height than the button.</p>
</div>

<div class="fizz-flex-row fizz-align-stretch">
  <p class="fizz-bordered fizz-inset-square-16 fizz-card"
     style="max-width: 250px">Here's a card with some text.</p>
  <p class="fizz-bordered fizz-inset-square-16 fizz-card"
     style="max-width: 250px">Here's a card with more text Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Temporibus, eos?</p>
</div>

.fizz-align-self-[start/center/end]

In cases where you might need to align an individual flex item, you can use .fizz-align-self-start, .fizz-align-self-center or .fizz-align-self-end. The default alignment for .fizz-flex-row and .fizz-space-between is center, so you should only use .fizz-align-self-center in combination with .fizz-align-content[start/end].

HTML 
<div class="fizz-flex-row"
     style="height: 100px">
  <button class="fizz-button">Button 1</button>
  <button class="fizz-button fizz-align-self-start">Button 2</button>
  <button class="fizz-button">Button 3</button>
  <button class="fizz-button fizz-align-self-end">Button 4</button>
  <button class="fizz-button">Button 5</button>
</div>

.fizz-flex-wrap

.fizz-flex-wrap Allows items in a flex row to wrap. It also uses the gap property instead of margins to ensure proper spacing between both rows and columns. The default gap is 16px but you can override this by setting a custom property called --gap.

Example Text

Example Text

Example Text

Example Text

Example Text

HTML 
<div class="fizz-flex-row fizz-flex-wrap fizz-justify-center"
     style="--gap: 32px">
  <figure>
    <img src="https://picsum.photos/80/80"
         alt=""
         width="80"
         height="80"
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Example Text</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/80/80"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Example Text</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/80/80"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Example Text</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/80/80"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Example Text</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/80/80"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Example Text</p>
    </figcaption>
  </figure>
</div>

.fizz-flex-multirow

Similar to creating a flex row with .fizz-flex-wrap, but allows for passing additional custom properties for greater control over the gap and flex item width at different viewport sizes. Gap is a shorthand property, so you can use two values to specify the vertical and horizontal values separately.

Custom Property Default Value Description
--gap-small $spacing-16 Gap on viewports < 700px
--gap-large $spacing-16 Gap on viewports >= 700px
--max-width-small 100px The max-width of each flex item on viewports < 700px
--max-width-large 100px The max-width of each flex item on viewports >= 700px

Beer

Ready-to-Drink

Wine

Spirits

Non-alcoholic

HTML 
<div class="fizz-flex-multirow"
     style="--gap-small: 16px; --gap-large: 16px 48px; --max-width-small: 96px; --max-width-large: 140px">
  <figure>
    <img src="https://picsum.photos/140/140"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Beer</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/140/140"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Ready-to-Drink</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/140/140"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Wine</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/140/140"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Spirits</p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/140/140"
         alt=""
         class="fizz-radius-round fizz-stack-8 fizz-margin-auto">
    <figcaption class="fizz-text-center fizz-text-medium">
      <p>Non-alcoholic</p>
    </figcaption>
  </figure>
</div>