# 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

# Flex Gap

fw-gap class can be used to specify the row-gap and column gap, i.e the space between rows and columns. fw-gap class can be used with numbers 0 to 8. Eg: fw-gap-0, fw-gap-1 etc.

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

fw-column-gap and fw-row-gap can be used to specify the space between columns and rows respectively. fw-row-gap and fw-column-gap class names can be used with numbers 0 to 8. Eg: fw-row-gap-0, fw-colum-gap-1 etc.

Flex column and row gap example:
1
2
3
4
5
6
7
Show Code
Last Updated: 12/22/2022, 12:17:03 PM