Flex Parent Properties
The flex parent is the containing element that often holds other
(child) elements.
Display
For any of the other flex properties to work, having the display property set to
flex is required. This is written as:
display: -webkit-flex; display:flex;
Other Parent Properties:
flex-direction
flex-wrap
flex-flow
Flex-direction and flex-wrap can be combined into this single property.
Syntax: main {-webkit-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap;}
The values:
The values are the same as flex-direction and flex-flow. Just place the value for flex-direction first, leave a space inbetween, then have the value for flex-wrap last.
align-content
justify-content
align-items
Flex Child Properties
flex-grow
Flex-grow determines how any extra space in the parent element will be filled by any child elements. Rows can grow vertically and columns can grow horizontally.
If every child element has a flex-grow value of 1, each child element will stretch to fill the remaining space. If only one child element is set with a flex-grow value, that child element is the only element that will stretch to fill the remaining space.
Values
Values can be numeric (ie. 0,1,2...), initial, or inherit. The default is 0.
Syntax: main {-webkit-flex-grow: 2; flex-grow: 2;}
- Only the 3rd child has a flex-grow value:

- The 2nd child has a flex-grow value of 2 and the 3rd child still has a flex-grow value of 1:

- Each child element has a flex-grow value of 1:

flex-shrink
If there is not enough space, flex-shrink determines how much each child element will shrink.
flex-basis
Flex-basis sets an initial width for flex children in a column or an initial height for flex children in a row.
flex
Flex is a shorthand property that compbines flex-grow, flex-shrink and flex-basis (in that specific order).
align-self
This allows a child element to adjust it's alignment individually and can override alignment set on the parent element. This sets the vertical alignment for children in a row and horizontal alignment for children in a column.