# 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 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 reverse example:
Column example:
Column reverse example:
# 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'.
Nowrap example:
Wrap reverse example:
# 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'.
End example:
Center example:
Between example:
Around example:
Evenly example:
# 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'
End example:
Center example:
Between example:
Around example:
Evenly example:
# 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'.
End example:
Center example:
Baseline example:
Stretch example:
# 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 example:
# 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 example:
# 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'.
# 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.
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.