Flexbox

Reorganize your components using Flexbox properties.

Initializing the component.

To start, use the d_flex or d_inline-flex class.

flexbox

<div class="d_flex">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
</div>
<div class="d_inline-flex">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
</div>

<div class="d_flex">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
</div>
<div class="d_inline-flex">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
</div>

You are free to organize the components with the classes available in the table.
It is also possible to specify the behavior of the components according to the breakpoints by adding --[R] at the end of each class (R being the breakpoint). Ex : justify_center--t.

flexbox

<div class="d_flex justify_center--t">...</div>
<div class="d_inline-flex--m align_start--d justify_around">...</div>

<div class="d_flex justify_center--t">...</div>
<div class="d_inline-flex--m align_start--d justify_around">...</div>

The order_[X] class manages the order of elements influenced by flexboxes.
X is a number between 1 and 12 and corresponds to the position of the element. For example: if element A must be placed at position 2, then it will receive the class order_2, if element B must be placed at position 1, then it will have the class order_1.

To go further, use the extended class order_[X]--[R].

flexbox

<div class="d_flex">
   <div class="flexbox-block-documentation order_2">A</div>
   <div class="flexbox-block-documentation order_1">B</div>
</div>
<div class="d_flex mt_1">
   <div class="flexbox-block-documentation order_1--t order_3">A</div>
   <div class="flexbox-block-documentation order_2">B</div>
</div>

<div class="d_flex">
   <div class="flexbox-block-documentation order_2">A</div>
   <div class="flexbox-block-documentation order_1">B</div>
</div>
<div class="d_flex mt_1">
   <div class="flexbox-block-documentation order_1--t order_3">A</div>
   <div class="flexbox-block-documentation order_2">B</div>
</div>

Use the gap_[X] class to create gaps. C is a number between 1 and 5.
You can control the gaps with breakpoints.
Here is the complete class gap_[X]--[R].

flexbox

<div class="d_flex gap_2 mb_1">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
   <div class="flexbox-block-documentation">C</div>
   <div class="flexbox-block-documentation">D</div>
   <div class="flexbox-block-documentation">E</div>
</div>
<div class="d_flex gap_3--t gap_1--m">
    <div class="flexbox-block-documentation">A</div>
    <div class="flexbox-block-documentation">B</div>
    <div class="flexbox-block-documentation">C</div>
    <div class="flexbox-block-documentation">D</div>
    <div class="flexbox-block-documentation">E</div>
</div>

<div class="d_flex gap_2 mb_1">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
   <div class="flexbox-block-documentation">C</div>
   <div class="flexbox-block-documentation">D</div>
   <div class="flexbox-block-documentation">E</div>
</div>
<div class="d_flex gap_3--t gap_1--m">
    <div class="flexbox-block-documentation">A</div>
    <div class="flexbox-block-documentation">B</div>
    <div class="flexbox-block-documentation">C</div>
    <div class="flexbox-block-documentation">D</div>
    <div class="flexbox-block-documentation">E</div>
</div>

flexbox

<div class="d_flex">
   <div class="flexbox-block-documentation order_2">A</div>
   <div class="flexbox-block-documentation order_1">B</div>
</div>
<div class="d_flex mt_1">
   <div class="flexbox-block-documentation order_1--t order_3">A</div>
   <div class="flexbox-block-documentation order_2">B</div>
</div>

<div class="d_flex">
   <div class="flexbox-block-documentation order_2">A</div>
   <div class="flexbox-block-documentation order_1">B</div>
</div>
<div class="d_flex mt_1">
   <div class="flexbox-block-documentation order_1--t order_3">A</div>
   <div class="flexbox-block-documentation order_2">B</div>
</div>

flexbox

<div class="d_flex gap_2 mb_1">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
   <div class="flexbox-block-documentation">C</div>
   <div class="flexbox-block-documentation">D</div>
   <div class="flexbox-block-documentation">E</div>
</div>
<div class="d_flex gap_3--t gap_1--m">
    <div class="flexbox-block-documentation">A</div>
    <div class="flexbox-block-documentation">B</div>
    <div class="flexbox-block-documentation">C</div>
    <div class="flexbox-block-documentation">D</div>
    <div class="flexbox-block-documentation">E</div>
</div>

<div class="d_flex gap_2 mb_1">
   <div class="flexbox-block-documentation">A</div>
   <div class="flexbox-block-documentation">B</div>
   <div class="flexbox-block-documentation">C</div>
   <div class="flexbox-block-documentation">D</div>
   <div class="flexbox-block-documentation">E</div>
</div>
<div class="d_flex gap_3--t gap_1--m">
    <div class="flexbox-block-documentation">A</div>
    <div class="flexbox-block-documentation">B</div>
    <div class="flexbox-block-documentation">C</div>
    <div class="flexbox-block-documentation">D</div>
    <div class="flexbox-block-documentation">E</div>
</div>

Class	Definition
d_flex	display : flex !important.
d_inline-flex	display : inline-flex !important.
direction_row	flex-direction : row !important.
direction_row-reverse	flex-direction : row-reverse !important.
direction_column	flex-direction : column !important.
direction_column-reverse	flex-direction : column-reverse !important.
flex_wrap	flex-wrap : wrap !important.
flex_nowrap	flex-wrap : nowrap !important.
flex_wrap-reverse	flex-wrap : wrap-reverse !important.
justify_start	justify-content : flex-start !important.
justify_end	justify-content : flex-end !important.
justify_center	justify-content : center !important.
justify_between	justify-content : space-between !important.
justify_around	justify-content : space-around !important.
justify_evenly	justify-content : space-evenly !important.
align_start	align-items: flex-start !important.
align_end	align-items: flex-end !important.
align_center	align-items: center !important.
align_stretch	align-items: stretch !important.
align_baseline	align-items: baseline !important.