Flexbox

New

CONTAINER UTILITIES

Flexbox utility classes to handle flexible content blocks and modules

Gap classes:

Gap classes matches our spacing values and follows the name convention bellow

- .gap-0 - class for 0px
- .gap-50 - class for 2px
- .gap-100 - class for 4px
- .gap-200 - class for 8px
- ...so forth

See spacing documentation for all values available

To handle responsive gap, use the following name convention:

- .gap-400-md - 16px of gap for tablet
- .gap-300-sm - 12px of gap for mobile

Wrap/Nowrap classes:

Wrap and nowrap classes to handle flex-wrap behavior

- .f-wrap - flex-wrap: wrap
- .f-nowrap - flex-wrap: nowrap

Use the following name convention to handle responsive wrap/nowrap:

- .f-wrap-md - flex-wrap: wrap for tablet
- .f-nowrap-lg - flex-wrap: nowrap for deslktop

Flexbox item - width utility

Utility classes to handle flexbox item widths within a Flexbox container

Width classes (in percent):

- .w-p10 - class for 10% width
- .w-p20 - class for 20% width
- .w-p30 - class for 30% width
- .w-p40 - class for 40% width
- .w-p50 - class for 50% width
- .w-p60 - class for 60% width
- .w-p70 - class for 70% width
- .w-p80 - class for 80% width
- .w-p90 - class for 90% width
- .w-p100 - class for 100% width

 

To handle item widths for specific breakpoints, use the following name convention:

- .w-p100-md - 100% width for tablet
- .w-p100-sm - 100% width for mobile

Example #1 - 50-50 across all breakpoints

50% width
50% width

<div class="flexbox gap-500">
    <div class="padding-y-1300 bg-grey-400 w-p50">50% width</div>
    <div class="padding-y-1300 bg-grey-400 w-p50">50% width</div>
</div>

Example #2 - 40-60 across all breakpoints

40% width
60% width

<div class="flexbox gap-500">
    <div class="padding-y-1300 bg-grey-400 w-p40">40% width</div>
    <div class="padding-y-1300 bg-grey-400 w-p60">60% width</div>
</div>

Example #3 - 100-100 sm and md, 60-40 lg


<div class="flexbox gap-500 f-wrap f-nowrap-lg">
    <div class="padding-y-1300 bg-grey-400 w-p100 w-p60-lg"></div>
    <div class="padding-y-1300 bg-grey-400 w-p100 w-p60-lg"></div>
</div>