# Layout

Flex utilities are provided in an atomic way to easily create any layout easily.

# Flex

'fw-flex' is the class to include to create a flex container.

Flex item 1
Flex item 2
Show Code

# Flex Direction

'fw-flex-#{$direction}' is the class to establishes the main-axis for the flex container.

#{$direction} should be substituted with one of these values 'row', 'row-reverse', 'column', 'column-reverse'.

Row Example:
Flex item 1
Flex item 2

Row reverse example:
Flex item 1
Flex item 2

Column example:
Flex item 1
Flex item 2

Column reverse example:
Flex item 1
Flex item 2
Show Code

# Flex Wrap

'fw-flex-#{$wrap}' is a class that can be used to either wrap/unwrap/reverse-wrap items inside the flex container.

#{$wrap} should be substituted with one of these values 'wrap', 'wrap-reverse', 'nowrap'.

Wrap example:
Flex item 1
Flex item 2

Nowrap example:
Flex item 1
Flex item 2

Wrap reverse example:
Flex item 1
Flex item 2
Show Code

# Flex Justify

We can use 'fw-justify-#{$value}' class to position a flex item along a flex container's main axis.

#{$value} should be substituted with one of these values 'start', 'end', 'center', 'between', 'around', 'evenly'.

Start example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

End example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Center example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Between example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Around example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Evenly example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Show Code

# Flex Align Contents

We can use 'fw-content-#{$name}' class to position items in multi-row flex container.

#{$name} should be substituted with one of these values 'start', 'end', 'center', 'between', 'around', 'evenly'

Start example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

End example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Center example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Between example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Around example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7

Evenly example:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Show Code

# Flex Align Items

We can use 'fw-items-#{$item}' class to position a flex item along a flex container's cross axis.

#{$item} should be substituted with one of these values 'start', 'end', 'center', 'baseline', 'stretch'.

Start example:
Item 1
Item 2
Item 3
Item 4

End example:
Item 1
Item 2
Item 3
Item 4

Center example:
Item 1
Item 2
Item 3
Item 4

Baseline example:
Item 1
Item 2
Item 3
Item 4

Stretch example:
Item 1
Item 2
Item 3
Item 4
Show Code

# Flex Grow

We can use either 'fw-flex-grow-0' or 'fw-flex-grow' value in flex items. 'fw-flex-grow-0' to prevent a flex item from growing. 'fw-flex-grow' to allow a flex item to grow to fill any available space.

Grow-0 example:
Flex item 1
Flex item 2

Grow example:
Flex item 1
Flex item 2
Show Code

# Flex Shrink

We can use either 'fw-flex-shrink-0' or 'fw-flex-shrink' value in flex items. 'fw-flex-shrink-0' to prevent a flex item from shrinking. 'fw-flex-shrink' to allow a flex item to shrink if needed.

Shrink-0 example:
Flex item 1
Flex item 2

Shrink example:
Flex item 1
Flex item 2
Show Code

# Flex Order

We can use 'fw-order-#{$number}' class to render flex items in a different order than they appear in the DOM.

#{$number} should be substituted with a value from 0 to 12. Other values that can be used are 'fw-order-first', 'fw-order-last', 'fw-order-none'.

Order example:
1
2
3
4
5
6
7
Show Code
Last Updated: 11/30/2021, 11:44:52 AM