Flexbox

• Basic
• Responsive
• Main axis align start
• Main axis align center
• Main axis align end
• Main axis align space between
• Main axis align space around
• Main axis align space evenly
• Cross axis align start
• Cross axis align center
• Cross axis align end
• Cross axis align baseline
• No wrap
• Row reverse
• Column
• Column reverse
• Items widths twelfths
• Items widths percentage
• Gap 12px
• Gap 16px
• Gap 24px
• Gap 32px

Basic

Component c-flex applies display: flexbox on specified element.

<div class="c-flex">
    <div>item</div>
    <div>item two</div>
    <div>item three</div>
    <div>item four</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
    }
</style>

Responsive

Every modifier of flex component is responsive, which means that every features can be applied on specified screen sizes. Example with m-main-end modifier:

The following example shows an HTML element onto which MODIFIER_NAME is applied on SCREEN_SIZE_NAME

<HTMLTag class="c-flex m-[MODIFIER_NAME]--[SCREEN_SIZE_NAME]"></HTMLTag>

The following example shows an HTML element onto which MODIFIER_NAME is applied on multiple screen sizes through attribute.

<HTMLTag class="c-flex" m-[MODIFIER_NAME]="[SCREEN_SIZE_1], [SCREEN_SIZE_2], [SCREEN_SIZE_3]"></HTMLTag>

Similar to

<HTMLTag class="c-flex m-[MODIFIER_NAME]--[SCREEN_SIZE_1] m-[MODIFIER_NAME]--[SCREEN_SIZE_2] m-[MODIFIER_NAME]--[SCREEN_SIZE_3]"></HTMLTag>

<!-- Responsive classes -->
<div class="c-flex m-main-end--xs">
    <div>I align on end on xs screen size</div>
</div>
<!-- Shorthand -->
<div class="c-flex" m-main-end="xs">
    <div>I align on end on xs screen size</div>
</div>
<!-- Shorthand -->
<div class="c-flex" m-main-end="xs,sm">
    <div>I align on end on xs and sm screen sizes</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Main axis align start

m-main-start modifier for justify-content: flex-start

<div class="c-flex m-main-start">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Main axis align center

m-main-center modifier for justify-content: center

<div class="c-flex m-main-center">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Main axis align end

m-main-end modifier for justify-content: flex-end

<div class="c-flex m-main-end">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Main axis align space between

m-main-space-between modifier for justify-content: space-between

<div class="c-flex m-main-space-between">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Main axis align space around

m-main-space-around modifier for justify-content: space-around

<div class="c-flex m-main-space-around">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Main axis align space evenly

m-main-space-evenly modifier for justify-content: space-evenly

<div class="c-flex m-main-space-evenly">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Cross axis align start

m-cross-start modifier for align-items: flex-start

<div class="c-flex m-cross-start">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Cross axis align center

m-cross-center modifier for align-items: center

<div class="c-flex m-cross-center">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Cross axis align end

m-cross-end modifier for align-items: flex-end

<div class="c-flex m-cross-end">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Cross axis align baseline

m-cross-baseline modifier for align-items: baseline

<div class="c-flex m-cross-baseline">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

No wrap

m-nowrap modifier for flex-wrap: nowrap

<div class="c-flex m-nowrap">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth lorem dolor tempor sed lorem dolor lorem ipsum lorem dolor tempor sed lorem dolor lorem ipsum lorem dolor tempor sed lorem dolor lorem ipsum.</div>
</div>
<p>Below example without m-nowrap</p>
<div class="c-flex">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth lorem dolor tempor sed lorem dolor lorem ipsum lorem dolor tempor sed lorem dolor lorem ipsum lorem dolor tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Row reverse

m-row-reverse modifier for flex-direction: row-reverse, reverses the order of items.

<div class="c-flex m-row-reverse">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Column

m-column modifier for flex-direction: column

<div class="c-flex m-column">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Column reverse

m-column-reverse modifier for flex-direction: column-reverse, reverses the order of items.

<div class="c-flex m-column-reverse">
    <div>First</div>
    <div>Second<br>lorem<br>ipsum</div>
    <div>Third</div>
    <div>Fourth<br>lorem<br>dolor<br>Tempor sed lorem dolor lorem ipsum.</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex { background-color: var(--goafe-color-support-success-500); }
    .c-flex > div { background-color: var(--goafe-color-neutral-900);border-right: var(--goafe-border-thin-primary-500);}
</style>

Items widths twelfths

Flex component does not support width modifiers for its children. To adjust items width or height, use dimensions component. The modifier m-w-{twelfth}t is related to twelfths.

<div class="c-flex">
    <div class="c-dim m-w-12t">12t</div>
    <div class="c-dim m-w-3t">3t</div>
    <div class="c-dim m-w-3t">3t</div>
    <div class="c-dim m-w-3t">3t</div>
    <div class="c-dim m-w-3t">3t</div>
    <div class="c-dim m-w-4t">4t</div>
    <div class="c-dim m-w-4t">4t</div>
    <div class="c-dim m-w-4t">4t</div>
    <div class="c-dim m-w-6t">6t</div>
    <div class="c-dim m-w-6t">6t</div>
    <div class="c-dim m-w-7t">7t</div>
    <div class="c-dim m-w-5t">5t</div>
    <div class="c-dim m-w-8t">8t</div>
    <div class="c-dim m-w-4t">4t</div>
    <div class="c-dim m-w-9t">9t</div>
    <div class="c-dim m-w-3t">3t</div>
    <div class="c-dim m-w-10t">10t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-11t">11t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-5t">5t</div>
    <div class="c-dim m-w-5t">5t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-1t">1t</div>
    <div class="c-dim m-w-6t">6t</div>
    <div class="c-dim m-w-3t">3t</div>
    <div class="c-dim m-w-2t">2t</div>
    <div class="c-dim m-w-1t">1t</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
</style>

Items widths percentage

Flex component does not support width modifiers for its children. To adjust items width or height, use dimensions component. The modifier m-w-{percentage}pc is related to percentage.

<div class="c-flex">
    <div class="c-dim m-w-20pc">20pc</div>
    <div class="c-dim m-w-20pc">20pc</div>
    <div class="c-dim m-w-20pc">20pc</div>
    <div class="c-dim m-w-20pc">20pc</div>
    <div class="c-dim m-w-20pc">20pc</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
</style>

Gap 12px

m-g12 modifier on c-flex applies flex gap 12 pixels between items.

The following example uses dimensions component m-w-{twelfth}tg12 for twelfths with gap 12 pixels

<div class="c-flex m-g12">
    <div class="c-dim m-w-12tg12">12tg12</div>
    <div class="c-dim m-w-3tg12">3tg12</div>
    <div class="c-dim m-w-3tg12">3tg12</div>
    <div class="c-dim m-w-3tg12">3tg12</div>
    <div class="c-dim m-w-3tg12">3tg12</div>
    <div class="c-dim m-w-4tg12">4tg12</div>
    <div class="c-dim m-w-4tg12">4tg12</div>
    <div class="c-dim m-w-4tg12">4tg12</div>
    <div class="c-dim m-w-6tg12">6tg12</div>
    <div class="c-dim m-w-6tg12">6tg12</div>
    <div class="c-dim m-w-7tg12">7tg12</div>
    <div class="c-dim m-w-5tg12">5tg12</div>
    <div class="c-dim m-w-8tg12">8tg12</div>
    <div class="c-dim m-w-4tg12">4tg12</div>
    <div class="c-dim m-w-9tg12">9tg12</div>
    <div class="c-dim m-w-3tg12">3tg12</div>
    <div class="c-dim m-w-10tg12">10tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-11tg12">11tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-5tg12">5tg12</div>
    <div class="c-dim m-w-5tg12">5tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-6tg12">6tg12</div>
    <div class="c-dim m-w-3tg12">3tg12</div>
    <div class="c-dim m-w-2tg12">2tg12</div>
    <div class="c-dim m-w-1tg12">1tg12</div>
    <div class="c-dim m-w-20pcg12">20pcg12</div>
    <div class="c-dim m-w-20pcg12">20pcg12</div>
    <div class="c-dim m-w-20pcg12">20pcg12</div>
    <div class="c-dim m-w-20pcg12">20pcg12</div>
    <div class="c-dim m-w-20pcg12">20pcg12</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
    }
</style>

Gap 16px

m-g16 modifier on c-flex applies flex gap 16 pixels between items.

The following example uses dimensions component m-w-{twelfth}tg16 for twelfths with gap 16 pixels

<div class="c-flex m-g16">
    <div class="c-dim m-w-12tg16">12tg16</div>
    <div class="c-dim m-w-6tg16">6tg16</div>
    <div class="c-dim m-w-6tg16">6tg16</div>
    <div class="c-dim m-w-6tg16">6tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-4tg16">4tg16</div>
    <div class="c-dim m-w-4tg16">4tg16</div>
    <div class="c-dim m-w-4tg16">4tg16</div>
    <div class="c-dim m-w-3tg16">3tg16</div>
    <div class="c-dim m-w-3tg16">3tg16</div>
    <div class="c-dim m-w-3tg16">3tg16</div>
    <div class="c-dim m-w-3tg16">3tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-5tg16">5tg16</div>
    <div class="c-dim m-w-5tg16">5tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-7tg16">7tg16</div>
    <div class="c-dim m-w-3tg16">3tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-8tg16">8tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-9tg16">9tg16</div>
    <div class="c-dim m-w-2tg16">2tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-10tg16">10tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-11tg16">11tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-1tg16">1tg16</div>
    <div class="c-dim m-w-20pcg16">20pcg16</div>
    <div class="c-dim m-w-20pcg16">20pcg16</div>
    <div class="c-dim m-w-20pcg16">20pcg16</div>
    <div class="c-dim m-w-20pcg16">20pcg16</div>
    <div class="c-dim m-w-20pcg16">20pcg16</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
    }
</style>

Gap 24px

m-g24 modifier on c-flex applies flex gap 24 pixels between items.

The following example uses dimensions component m-w-{twelfth}tg24 for twelfths with gap 24 pixels

<div class="c-flex m-g24">
    <div class="c-dim m-w-12tg24">12tg24</div>
    <div class="c-dim m-w-6tg24">6tg24</div>
    <div class="c-dim m-w-6tg24">6tg24</div>
    <div class="c-dim m-w-6tg24">6tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-4tg24">4tg24</div>
    <div class="c-dim m-w-4tg24">4tg24</div>
    <div class="c-dim m-w-4tg24">4tg24</div>
    <div class="c-dim m-w-3tg24">3tg24</div>
    <div class="c-dim m-w-3tg24">3tg24</div>
    <div class="c-dim m-w-3tg24">3tg24</div>
    <div class="c-dim m-w-3tg24">3tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-5tg24">5tg24</div>
    <div class="c-dim m-w-5tg24">5tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-7tg24">7tg24</div>
    <div class="c-dim m-w-3tg24">3tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-8tg24">8tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-9tg24">9tg24</div>
    <div class="c-dim m-w-2tg24">2tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-10tg24">10tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-11tg24">11tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-1tg24">1tg24</div>
    <div class="c-dim m-w-20pcg24">20pcg24</div>
    <div class="c-dim m-w-20pcg24">20pcg24</div>
    <div class="c-dim m-w-20pcg24">20pcg24</div>
    <div class="c-dim m-w-20pcg24">20pcg24</div>
    <div class="c-dim m-w-20pcg24">20pcg24</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
    }
</style>

Gap 32px

m-g32 modifier on c-flex applies flex gap 32 pixels between items.

The following example uses dimensions component m-w-{twelfth}tg32 for twelfths with gap 32 pixels

<div class="c-flex m-g32">
    <div class="c-dim m-w-12tg32">12tg32</div>
    <div class="c-dim m-w-6tg32">6tg32</div>
    <div class="c-dim m-w-6tg32">6tg32</div>
    <div class="c-dim m-w-6tg32">6tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-4tg32">4tg32</div>
    <div class="c-dim m-w-4tg32">4tg32</div>
    <div class="c-dim m-w-4tg32">4tg32</div>
    <div class="c-dim m-w-3tg32">3tg32</div>
    <div class="c-dim m-w-3tg32">3tg32</div>
    <div class="c-dim m-w-3tg32">3tg32</div>
    <div class="c-dim m-w-3tg32">3tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-5tg32">5tg32</div>
    <div class="c-dim m-w-5tg32">5tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-7tg32">7tg32</div>
    <div class="c-dim m-w-3tg32">3tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-8tg32">8tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-9tg32">9tg32</div>
    <div class="c-dim m-w-2tg32">2tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-10tg32">10tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-11tg32">11tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-1tg32">1tg32</div>
    <div class="c-dim m-w-20pcg32">20pcg32</div>
    <div class="c-dim m-w-20pcg32">20pcg32</div>
    <div class="c-dim m-w-20pcg32">20pcg32</div>
    <div class="c-dim m-w-20pcg32">20pcg32</div>
    <div class="c-dim m-w-20pcg32">20pcg32</div>
</div>
<!-- DEMO ONLY -->
<style>
    .c-flex {
        background-color: var(--goafe-color-support-success-500);
    }
    .c-flex > div {
        background-color: var(--goafe-color-neutral-900);
    }
</style>