Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Enable Flex

Apply display utilities to create a flexbox container and transform direct children elements into flex items.

I'm a flexbox container!
<div class="d-flex p-2 border">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 border">I'm an inline flexbox container!</div>



Direction

Set the direction of flex items in a flex container with direction utilities.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row border mb-2">
  <div class="p-2 bg-gray-300">Flex item 1</div>
  <div class="p-2 bg-gray-300">Flex item 2</div>
  <div class="p-2 bg-gray-300">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse border">
  <div class="p-2 bg-gray-300">Flex item 1</div>
  <div class="p-2 bg-gray-300">Flex item 2</div>
  <div class="p-2 bg-gray-300">Flex item 3</div>
</div>



Justify Content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex justify-content-start border mb-2">...</div>
<div class="d-flex justify-content-end border mb-2">...</div>
<div class="d-flex justify-content-center border mb-2">...</div>
<div class="d-flex justify-content-between border mb-2">...</div>
<div class="d-flex justify-content-around border mb-2">...</div>
<div class="d-flex justify-content-evenly border mb-2">...</div>



Align Items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex align-items-start ht-100 border mb-2">...</div>
<div class="d-flex align-items-end ht-100 border mb-2">...</div>
<div class="d-flex align-items-center ht-100 border mb-2">...</div>
<div class="d-flex align-items-stretch ht-100 border mb-2">...</div>



Align Self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis.

Flex item 1
Flex item 2
Flex item 3
Flex item 4
<div class="p-2 bg-gray-300 align-self-start">Flex item 1</div>
<div class="p-2 bg-gray-300 align-self-end">Flex item 2</div>
<div class="p-2 bg-gray-300 align-self-center">Flex item 3</div>
<div class="p-2 bg-gray-300 align-self-stretch">Flex item 4</div>



Fill

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content.

Flex item with a lot of content
Flex item
Flex item
<div class="d-flex">
  <div class="p-2 bg-gray-300 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 bg-gray-300 flex-fill">Flex item</div>
  <div class="p-2 bg-gray-300 flex-fill">Flex item</div>
</div>



Grow & Shrink

Use .flex-grow utilities to toggle a flex item’s ability to grow to fill available space.

Flex item with a lot of content
Flex item
Flex item
<div class="d-flex">
  <div class="p-2 bg-gray-300 flex-grow-1">Flex item with a lot of content</div>
  <div class="p-2 bg-gray-300">Flex item</div>
  <div class="p-2 bg-gray-300">Flex item</div>
</div>



Auto Margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex mb-2">
  <div class="p-2 bg-gray-300">Flex item</div>
  <div class="p-2 bg-gray-300 me-auto">Flex item</div>
  <div class="p-2 bg-gray-300">Flex item</div>
</div>
<div class="d-flex">
  <div class="p-2 bg-gray-300">Flex item</div>
  <div class="p-2 bg-gray-300 ms-auto">Flex item</div>
  <div class="p-2 bg-gray-300">Flex item</div>
</div>



Order

Change the visual order of specific flex items with a handful of order utilities.

First flex item
Second flex item
Third flex item
<div class="d-flex">
  <div class="order-3 p-2 bg-gray-300">First flex item</div>
  <div class="order-2 p-2 bg-gray-300">Second flex item</div>
  <div class="order-1 p-2 bg-gray-300">Third flex item</div>
</div>



Align Content

Use align-content utilities on flexbox containers to align flex items together on the cross axis.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap border ht-150 mb-2">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap border ht-150 mb-2">...</div>



Media Object

Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.

This is some content from a media component. You can replace this with any content and adjust it as needed. 
<div class="d-flex align-items-center">
  <div class="flex-shrink-0 w-15">
    <img src="../assets/img/img1.jpg" class="img-fluid" alt="">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels