# Introduction

The helper classes add standard flexbox functonality to dom items.

# Some links to the standard

Basic concepts of flexbox
A Complete Guide to Flexbox
Flex Cheatsheet

# Adding flex box.

By adding 1 of these classes to a dom container, you will get the flex box functionality.

• flx-row - Flex direction row, from left to right as block.
• flx-inline-row - Flex direction row, from left to right as inline.
• flx-col - Flex direction column, from top to bottom as block.
• flx-inline-row - Flex direction row, from from top to bottom as inline.

# Flex block

CSS Class: flx-row or flx-col

# Flex inline

CSS Class: flx-inline-row or flx-inline-col

# Flex Wrap

By adding the class flx-wrap the items will wrap if there not is space enough.

CSS Class: flx-wrap

# Flex

The flex CSS property sets how a flex item will grow or shrink to fit the space available in its flex container. It is a shorthand for flex-grow, flex-shrink, and flex-basis if you look at the standard.
By default flex items don't shrink below their minimum content size. To change this, set the item's min-width or min-height.

There are 8 CSS classes for Flex. flx1 to flx-8
If all items have the class flx1, the remaining space in the container will be distributed equally to all children. If one of the children has a class flx2, the remaining space would take up twice as much space as the others (or it will try to, at least).

# Align and Justify FLEXBOX

Properties that control alignment.

• justify-content — controls alignment of all items on the main axis.
• align-items — controls alignment of all items on the cross axis.
• align-self — controls alignment of an individual flex item on the cross axis.
• align-content — controls space between flex lines on the cross axis, only works when wrap is in use.

For easy use, there are these CSS classes.

• justContent- with these paremeters start/center/end/spaceBetween/spaceAround/spaceEvenly/stretch.
• alignItems- with these paremeters start/center/end/stretch.
• alignSelf- with these paremeters start/center/end/stretch.
• alignContent- with these paremeters start/center/end/spaceBetween/spaceAround/spaceEvenly/stretch.

The properties depend on the flex direction, row or column.

When the flex direction is row:
justContent- adjust the items in the left-right direction.
alignItems- adjust the items in the up-down direction.
alignSelf- adjust the items in the up-down direction.
alignContent- adjust the items in the up-down direction.

When the flex direction is column:
justContent- adjust the items in the up-down direction.
alignItems- adjust the items in the left-right direction.
alignSelf- adjust the items in the left-right direction.
alignContent- adjust the items in the left-right direction.

# Justify Content

CSS Class: justContent-start/center/end/space-between/space-around/space-evenly/stretch
The default is stretch

# Align Items

CSS Class: alignItems-start/center/end/stretch
The default is stretch

# Align Self

CSS Class: alignSelf-start/center/end/stretch
The default is stretch.
The selected alignSelf class is bound to box 2.

# Align Content

CSS Class: alignContent-start/center/end/space-between/space-around/space-evenly/stretch
The default is stretch

# Align and Justify Sandbox.