Layout

Display: Block

Class Name

Value

Class Object

display-block

Display: Block

👉

Display: Flex

Class Name

Value

Class Object

display-flex

Display: Flex

👉

Direction

Class Name

Value

Class Object

flex-horizontal

Direction: Horizontal

👉

flex-horizontal-reverse

Direction: Horizontal Reverse

👉

flex-vertical

Direction: Vertical

👉

flex-vertical-reverse

Direction: Vertical Reverse

👉

Align

Class Name

Value

Class Object

flex-align-start

Align: Start

👉

flex-align-center

Align: Center

👉

flex-align-end

Align: End

👉

flex-align-stretch

Align: Stretch

👉

flex-align-baseline

Align: Baseline

👉

Justify

Class Name

Value

Class Object

flex-justify-start

Justify: Start

👉

flex-justify-center

Justify: Center

👉

flex-justify-end

Justify: End

👉

flex-justify-between

Justify: Space Between

👉

flex-justify-around

Justify: Space Around

👉

Horizontal Combos

This list includes all 25 combinations of the "Align" and "Justify" properties based on "Display: Flex" and "Direction: Horizontal"

Class Name

Value

Class Object

flex-h-al-start-ju-start

Direction: Horizontal | Align: Start | Justify: Start

👉

flex-h-al-start-ju-center

Direction: Horizontal | Align: Start | Justify: Center

👉

flex-h-al-start-ju-end

Direction: Horizontal | Align: Start | Justify: End

👉

flex-h-al-start-ju-between

Direction: Horizontal | Align: Start | Justify: Space Between

👉

flex-h-al-start-ju-around

Direction: Horizontal | Align: Start | Justify: Space Around

👉

flex-h-al-center-ju-start

Direction: Horizontal | Align: Center | Justify: Start

👉

flex-h-al-center-ju-center

Direction: Horizontal | Align: Center | Justify: Center

👉

flex-h-al-center-ju-end

Direction: Horizontal | Align: Center | Justify: End

👉

flex-h-al-center-ju-between

Direction: Horizontal | Align: Center | Justify: Space Between

👉

flex-h-al-center-ju-around

Direction: Horizontal | Align: Center | Justify: Space Around

👉

flex-h-al-end-ju-start

Direction: Horizontal | Align: End | Justify: Start

👉

flex-h-al-end-ju-center

Direction: Horizontal | Align: End | Justify: Center

👉

flex-h-al-end-ju-end

Direction: Horizontal | Align: End | Justify: End

👉

flex-h-al-end-ju-between

Direction: Horizontal | Align: End | Justify: Space Between

👉

flex-h-al-end-ju-around

Direction: Horizontal | Align: End | Justify: Space Around

👉

flex-h-al-stretch-ju-start

Direction: Horizontal | Align: Stretch | Justify: Start

👉

flex-h-al-stretch-ju-center

Direction: Horizontal | Align: Stretch | Justify: Center

👉

flex-h-al-stretch-ju-end

Direction: Horizontal | Align: Stretch | Justify: End

👉

flex-h-al-stretch-ju-between

Direction: Horizontal | Align: Stretch | Justify: Space Between

👉

flex-h-al-stretch-ju-around

Direction: Horizontal | Align: Stretch | Justify: Space Around

👉

flex-h-al-baseline-ju-start

Direction: Horizontal | Align: Baseline | Justify: Start

👉

flex-h-al-baseline-ju-center

Direction: Horizontal | Align: Baseline | Justify: Center

👉

flex-h-al-baseline-ju-end

Direction: Horizontal | Align: Baseline | Justify: End

👉

flex-h-al-baseline-ju-between

Direction: Horizontal | Align: Baseline | Justify: Space Between

👉

flex-h-al-baseline-ju-around

Direction: Horizontal | Align: Baseline | Justify: Space Around

👉

Vertical Combos

This list includes all 25 combinations of the "Align" and "Justify" properties based on "Display: Flex" and "Direction: Vertical"

Class Name

Value

Class Object

flex-v-al-start-ju-start

Direction: Vertical | Align: Start | Justify: Start

👉

flex-v-al-start-ju-center

Direction: Vertical | Align: Start | Justify: Center

👉

flex-v-al-start-ju-end

Direction: Vertical | Align: Start | Justify: End

👉

flex-v-al-start-ju-between

Direction: Vertical | Align: Start | Justify: Space Between

👉

flex-v-al-start-ju-around

Direction: Vertical | Align: Start | Justify: Space Around

👉

flex-v-al-center-ju-start

Direction: Vertical | Align: Center | Justify: Start

👉

flex-v-al-center-ju-center

Direction: Vertical | Align: Center | Justify: Center

👉

flex-v-al-center-ju-end

Direction: Vertical | Align: Center | Justify: End

👉

flex-v-al-center-ju-between

Direction: Vertical | Align: Center | Justify: Space Between

👉

flex-v-al-center-ju-around

Direction: Vertical | Align: Center | Justify: Space Around

👉

flex-v-al-end-ju-start

Direction: Vertical | Align: End | Justify: Start

👉

flex-v-al-end-ju-center

Direction: Vertical | Align: End | Justify: Center

👉

flex-v-al-end-ju-end

Direction: Vertical | Align: End | Justify: End

👉

flex-v-al-end-ju-between

Direction: Vertical | Align: End | Justify: Space Between

👉

flex-v-al-end-ju-around

Direction: Vertical | Align: End | Justify: Space Around

👉

flex-v-al-stretch-ju-start

Direction: Vertical | Align: Stretch | Justify: Start

👉

flex-v-al-stretch-ju-center

Direction: Vertical | Align: Stretch | Justify: Center

👉

flex-v-al-stretch-ju-end

Direction: Vertical | Align: Stretch | Justify: End

👉

flex-v-al-stretch-ju-between

Direction: Vertical | Align: Stretch | Justify: Space Between

👉

flex-v-al-stretch-ju-around

Direction: Vertical | Align: Stretch | Justify: Space Around

👉

flex-v-al-baseline-ju-start

Direction: Vertical | Align: Baseline | Justify: Start

👉

flex-v-al-baseline-ju-center

Direction: Vertical | Align: Baseline | Justify: Center

👉

flex-v-al-baseline-ju-end

Direction: Vertical | Align: Baseline | Justify: End

👉

flex-v-al-baseline-ju-between

Direction: Vertical | Align: Baseline | Justify: Space Between

👉

flex-v-al-baseline-ju-around

Direction: Vertical | Align: Baseline | Justify: Space Around

👉

Children

Class Name

Value

Class Object

flex-no-wrap

Children: No Wrap

👉

flex-wrap-align-start

Children: Wrap | Align: Start

👉

flex-wrap-align-center

Children: Wrap | Align: Center

👉

flex-wrap-align-end

Children: Wrap | Align: End

👉

flex-wrap-align-stretch

Children: Wrap | Align: Stretch

👉

flex-wrap-align-between

Children: Wrap | Align: Space Between

👉

flex-wrap-align-around

Children: Wrap | Align: Space Around

👉

flex-wrap-reverse

Children: Wrap Reverse

👉

Flex (Child)

These classes can be applied if the parent of the element has the "Display" property set to "Flex".

Sizing

Class Name

Value

Class Object

flex-child-sizing-shrink

Sizing: Shrink

👉

flex-child-sizing-grow

Sizing: Grow

👉

flex-child-sizing-none

Sizing: None

👉

Align

Class Name

Value

Class Object

flex-child-align-auto

Align: Auto

👉

flex-child-align-start

Align: Start

👉

flex-child-align-center

Align: Center

👉

flex-child-align-end

Align: End

👉

flex-child-align-stretch

Align: Stretch

👉

flex-child-align-baseline

Align: Baseline

👉

Order

You can create a Custom order according to your needs.

Class Name

Value

Class Object

flex-child-order-none

Order: None

👉

flex-child-order-first

Order: First

👈

flex-child-order-last

Order: Last

👉

Display: Grid

Class Name

Value

Class Object

display-grid

Display: Grid

👉

Align

Class Name

Value

Class Object

grid-align-start-start

Align: Start - Justify: Start

👉

grid-align-start-center

Align: Start - Justify: Center

👉

grid-align-start-end

Align: Start - Justify: End

👉

grid-align-start-stretch

Align: Start - Justify: Stretch

👉

grid-align-start-baseline

Align: Start - Justify: Baseline

👉

grid-align-center-start

Align: Center - Justify: Start

👉

grid-align-center-center

Align: Center - Justify: Center

👉

grid-align-center-end

Align: Center - Justify: End

👉

grid-align-center-stretch

Align: Center - Justify: Stretch

👉

grid-align-center-baseline

Align: Center - Justify: Baseline

👉

grid-align-end-start

Align: End - Justify: Start

👉

grid-align-end-center

Align: End - Justify: Center

👉

grid-align-end-end

Align: End - Justify: End

👉

grid-align-end-stretch

Align: End - Justify: Stretch

👉

grid-align-end-baseline

Align: End - Justify: Baseline

👉

grid-align-stretch-start

Align: Stretch - Justify: Start

👉

grid-align-stretch-center

Align: Stretch - Justify: Center

👉

grid-align-stretch-end

Align: Stretch - Justify: End

👉

grid-align-stretch-stretch

Align: Stretch - Justify: Stretch

👉

grid-align-stretch-baseline

Align: Stretch - Justify: Baseline

👉

grid-align-baseline-start

Align: Baseline - Justify: Start

👉

grid-align-baseline-center

Align: Baseline - Justify: Center

👉

grid-align-baseline-end

Align: Baseline - Justify: End

👉

grid-align-baseline-stretch

Align: Baseline - Justify: Stretch

👉

grid-align-baseline-baseline

Align: Baseline - Justify: Baseline

👉

Distribute

Class Name

Value

Class Object

grid-distribute-start-start

Align: Start - Justify: Start

👉

grid-distribute-start-center

Align: Start - Justify: Center

👉

grid-distribute-start-end

Align: Start - Justify: End

👉

grid-distribute-start-stretch

Align: Start - Justify: Stretch

👉

grid-distribute-start-between

Align: Start - Justify: Space Between

👉

grid-distribute-start-around

Align: Start - Justify: Space Around

👉

grid-distribute-center-start

Align: Center - Justify: Start

👉

grid-distribute-center-center

Align: Center - Justify: Center

👉

grid-distribute-center-end

Align: Center - Justify: End

👉

grid-distribute-center-stretch

Align: Center - Justify: Stretch

👉

grid-distribute-center-between

Align: Center - Justify: Space Between

👉

grid-distribute-center-around

Align: Center - Justify: Space Around

👉

grid-distribute-end-start

Align: End - Justify: Start

👉

grid-distribute-end-center

Align: End - Justify: Center

👉

grid-distribute-end-end

Align: End - Justify: End

👉

grid-distribute-end-stretch

Align: End - Justify: Stretch

👉

grid-distribute-end-between

Align: End - Justify: Space Between

👉

grid-distribute-end-around

Align: End - Justify: Space Around

👉

grid-distribute-stretch-start

Align: Stretch - Justify: Start

👉

grid-distribute-stretch-center

Align: Stretch - Justify: Center

👉

grid-distribute-stretch-end

Align: Stretch - Justify: End

👉

grid-distribute-stretch-stretch

Align: Stretch - Justify: Stretch

👉

grid-distribute-stretch-between

Align: Stretch - Justify: Space Between

👉

grid-distribute-stretch-around

Align: Stretch - Justify: Space Around

👉

grid-distribute-between-start

Align: Space Between - Justify: Start

👉

grid-distribute-between-center

Align: Space Between - Justify: Center

👉

grid-distribute-between-end

Align: Space Between - Justify: End

👉

grid-distribute-between-stretch

Align: Space Between - Justify: Stretch

👉

grid-distribute-between-between

Align: Space Between - Justify: Space Between

👉

grid-distribute-between-around

Align: Space Between - Justify: Space Around

👉

grid-distribute-around-start

Align: Space Around - Justify: Start

👉

grid-distribute-around-center

Align: Space Around - Justify: Center

👉

grid-distribute-around-end

Align: Space Around - Justify: End

👉

grid-distribute-around-stretch

Align: Space Around - Justify: Stretch

👉

grid-distribute-around-between

Align: Space Around - Justify: Space Between

👉

grid-distribute-around-around

Align: Space Around - Justify: Space Around

👉

Settings (Edit Grid)

There is only one example because the vastness of the settings is infinite and must be tailored to individual needs. For more flexibility, modify these parameters only after setting "Align" and "Distribute" otherwise they will be overwritten.

Class Name

Value

Class Object

grid-settings-g16-row-3xa

Grid: Gap: 16 | Direction: Row | Columns: 3 | Rows: Auto

👉

Display: Inline Block

Class Name

Value

Class Object

display-inline-block

Display: Inline Block

👉

Display: Inline

Class Name

Value

Class Object

display-inline

Display: Inline

👉

Display: None

Class Name

Value

Class Object

display-none

Display: None

👉