The display classes are divided into 4 groups:

1. Container => to display an item in a specific way
2. Fixed => to fix an element
3. Flex => to display an element flexibly
4. Grid => to display elements in a grid

Five Container classes are available:

1. .none => to hide an element globally
2. .hide => to visually hide an element
3. .container => to display a center 80% container
4. .block => to display an element as a block
5. .in-block => to display an element as a block online

Twelve Fixed classes are available:

1. .fixed-top / .fixed-right / .fixed-bottom / .fixed-left => to fix an element in one of the 4 main directions
2. .fixed-ct / .fixed-cr / .fixed-cb / .fixed-cl => to fix an element in the center of one of the 4 directions
3. .fixed-tr / .fixed-br / .fixed-bl / .fixed-tl => to fix an element in one of the 4 angles

Three types of Flex classes are available:

1. .col => to create a column list with flexbox
2. .row => to create a row list with flexbox
3. .flex => to create a grid with flexbox

The col classes consist of 2 parts:

• col-options

These options are 3, are optional & can be concatenated together to some extent:

1. reverse => to reverse the order of flexible elements
2. nowrap => to constrain flexible elements on a single column
3. inverse => to reverse the order of the columns

So we can write the col class in different ways:

• .col => without option
• .col-option1 => with one of the 3 options
• .col-option1-option2 => with two of the 3 options (nowrap & inverse are not associable)

The row classes consist of 2 parts:

• row-options

These options are 3, are optional & can be concatenated together to some extent:

1. reverse => to reverse the order of flexible elements
2. nowrap => to constrain flexible elements on a single line
3. inverse => to reverse the order of the lines

So we can write the row class in different ways:

• .row => without option
• .row-option1 => with one of the 3 options
• .row-option1-option2 => with two of the 3 options (nowrap & inverse are not associable)

Flex classes adapt to different screen sizes & the number of columns you want.

The flex classes consist of 2 parts: flex-grids

But only flex is mandatory; in this case only, its behaviour will not be related to the screen sizes or the number of columns.

In all other cases, these grids, which define the number of columns on this type of screen, are written concatenating:

• the number of columns desired => from 2 to 12
• with the screen type, that is => tn, sm, md, lg, wd

Examples:

• .flex-2tn => 2 columns for a resolution between 480px & 576px
• .flex-5sm => 5 columns for a resolution between 576px & 768px
• .flex-7md => 7 columns for a resolution between 768px & 1024px
• .flex-10wd => 10 columns for a resolution greater than 1366px

It is also possible to concatenate several grids in order to define all expected behaviours (on each type of screen):

• .flex-5sm-10lg => 5 columns for a resolution between 576px & 1024px, then beyond 1024px, 10 columns
• .flex-4tn-8md-12wd => 4 columns for a resolution between 480px & 768px, then 8 columns for a resolution between 768px & 1366px, finally 12 columns beyond 1366px
• .flex-3sm-6md-9lg-12wd => 3 columns for a resolution between 576px & 768px, then 6 columns for a resolution between 768px & 1024px, then 9 columns between 1024px & 1366px, finally 12 columns beyond 1366px
• .flex-2tn-4sm-6md-8lg-10wd => 2 columns for a resolution between 480px & 576px, then 4 columns for a resolution between 576px & 768px, then 6 columns between 768px & 1024px, after 8 columns between 1024px & 1366px, and finally 10 columns beyond 1366px

In addition, a type of option specific to flex layout is available:

• flexible => defines itself on a child element to modify its dimensions

Nine flexible classes are available:

1. <div class="flexible-auto"> Flex = 1 1 auto </div>
2. <div class="flexible-grow"> flex = 1 0 auto </div>
3. <div class="flexible-shrink"> Flex = 0 1 auto </div>
4. <div class="flexible-none"> flex = 0 0 auto </div>
5. <div class="flexible-double"> Flex = 2 0 auto </div>
6. <div class="flexible-half"> Flex = 0 2 auto </div>
7. <div class="flexible-third"> Flex = 0 3 auto </div>
8. <div class="flexible-quarter"> Flex = 0 4 auto </div>
9. <div class="flexible-all"> Flex = 1 1 100% </div>