Use the following flexbox helpers to distribute and align items in a container. If you are new to flexbox, you can start with this awesome guide to flexbox by CSS Tricks.
Use the following classes to control the direction of the items of a flex container:
| Class | Property |
|---|---|
has-direction-row | flex-direction: row; |
has-direction-row-rev | flex-direction: row-reverse |
has-direction-column | flex-direction: column; |
has-direction-column-rev | flex-direction: column-reverse |
Use has-direction-row to position flex items horizontailly (row direction):
<div class="is-flex has-direction-row"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Or just use has-direction-column to position flex items vertically (in a column direction):
<div class="is-flex has-direction-column"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the following classes to define the distribution of the space between and around content items along the cross axis:
| Class | Property |
|---|---|
has-content-center | align-content: center; |
has-content-start | align-content: flex-start; |
has-content-end | align-content: flex-end; |
has-content-between | align-content: space-between; |
has-content-around | align-content: space-around; |
has-content-evenly | align-content: space-evenly; |
Use the has-content-start helper to pack items from the start of the cross axis:
<div class="is-flex has-content-start has-h-64 has-flex-wrap"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use has-content-end to pack items from the end end of the cross axis:
<div class="is-flex has-content-end has-h-64 has-flex-wrap"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the has-content-center helper to pack items around the center of the cross axis:
<div class="is-flex has-content-center has-h-64 has-flex-wrap"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the following classes to define the alignment of the flex items along the cross axis.
| Class | Property |
|---|---|
has-items-start | align-items: flex-start; |
has-items-end | align-items: flex-end; |
has-items-center | align-items: center; |
has-items-stretch | align-items: stretch; |
You can use has-items-start to align flex items to the start of the cross axis:
<div class="is-flex has-items-start has-h-32 has-text-center"> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-w-full has-m-2 has-p-8 is-rounded has-bg-secondary">2</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use has-items-center to align flex items to the center of the cross axis:
<div class="is-flex has-items-center has-h-32 has-text-center"> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-w-full has-m-2 has-p-8 is-rounded has-bg-secondary">2</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use has-items-end helper to align flex items to the end of the cross axis:
<div class="is-flex has-items-end has-h-32 has-text-center"> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-w-full has-m-2 has-p-8 is-rounded has-bg-secondary">2</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the following classes to define how a single item is aligned on the cross axis:
| Class | Property |
|---|---|
has-self-auto | align-self: auto; |
has-self-start | align-self: flex-start; |
has-self-end | align-self: flex-end; |
has-self-center | align-self: center; |
has-self-stretch | align-self: stretch; |
has-self-baseline | align-self: baseline; |
Use has-self-start to align the item to the start of the cross axis:
<div class="is-flex has-items-end has-h-64 has-text-center"> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-secondary has-self-start">2</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use has-self-end to align the item to the end of the cross axis:
<div class="is-flex has-items-start has-h-64 has-text-center"> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-secondary has-self-end">2</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use has-self-center to align the item to the center of the cross axis:
<div class="is-flex has-items-start has-h-64 has-text-center"> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-secondary has-self-center">2</div> <div class="has-w-full has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the following classes to define how the browser should distribute the space between and around items along the main axis:
| Class | Property |
|---|---|
has-justify-left | justify-content: flex-start; |
has-justify-center | justify-content: center; |
has-justify-right | justify-content: flex-end; |
has-justify-between | justify-content: space-between; |
has-justify-around | justify-content: space-around; |
has-justify-evenly | justify-content: space-evenly; |
Use the has-justify-start helper to pack items from the start of the main axis:
<div class="is-flex has-justify-start has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the has-justify-center helper to pack items around the center of the main axis:
<div class="is-flex has-justify-center has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the has-justify-end helper to pack items from the end of the main axis:
<div class="is-flex has-justify-end has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the has-justify-between helper to distribute items evenly, and where the first item is flush with the start and the last item is flush with the end.
<div class="is-flex has-justify-between has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the has-justify-around helper to distribute items evenly, and items will have a half-size space on either end:
<div class="is-flex has-justify-around has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the has-justify-evenly helper to distribute items evenly:
<div class="is-flex has-justify-evenly has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">3</div> </div>
Use the following classes to define how items will wrap.
| Class | Property |
|---|---|
has-flex-wrap | flex-wrap: wrap; |
has-flex-no-wrap | flex-wrap: nowrap; |
Use has-flex-no-wrap helper to prevent items from wrapping:
<div class="is-flex has-flex-no-wrap has-text-center"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary has-w-96">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary has-w-96">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary has-w-96">3</div> </div>
Use the following classes to control the order of flex items.
| Class | Property |
|---|---|
has-order-none | order: 0; |
has-order-first | order: -999; |
has-order-last | order: 999; |
<div class="is-flex has-justify-between"> <div class="has-m-2 has-p-4 is-rounded has-bg-primary has-order-last">1</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary">2</div> <div class="has-m-2 has-p-4 is-rounded has-bg-primary has-order-first">3</div> </div>
Control the flexbox properties of an element at a specific breakpoint adding a -{breakpoint} suffix to the flexbox helper class. For example, you can change the direction of the flexbox items to column only on mobile devices adding the has-direction-column-mobile class to the container element:
<div class="is-flex has-direction-column-mobile"> . . . </div>
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.