#Flexbox Basics
##Overview
###Flex Container:
display:
flex-direction:
flex-wrap:
flex-flow:
justify-content:
align-items:
align-content:
###Flex Items:
order:
align-self:
flex-grow:
flex-shrink:
flex-basis:
flex:
##Flex Container Properties Control the direction of flex items within the parent container.
###Add the following code at the top of any container css to "activate" flexbox:
display: flex;
###Set the direction of the box, options are (row is default):
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
###Set the wrap properties of the box (nowrap is default):
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: nowrap-reverse;
###Flex-Flow is a short hand which sets both flex-direction and flex-wrap at once:
flex-flow: row nowrap;
flex-flow: column wrap;
##Control the direction of flex items along main and cross axes
###Main Axis/Left to Right(flex-start is default):
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
###Cross Axis/Top to Bottom (stretch is default):
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
###Cross Axis for content with more than one line (stretch is default):
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
##Flex Item Properties Overrides position of individual flex items along main or cross axis
###To change order of appearance (not actual HTML order):
order: 1;
Value can be any positive of negative integer
###To override align-items position on cross axis
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: baseline;
###Override justify-content positioning on main exis to fill extra space:
margin-left: auto;
margin-right: auto;
##Control the amount of space flex items will grow or shrink to fill based on container size
###Flex Grow Specifies the flex grow factor of a flex item. Default is 0.
flex-grow: 0;
flex-grow: [any integer];
flex-grow: auto;
###Flex Shrink Specifies the flex shrink factor of a flex item. Default is 1.
flex-shrink: 1;
flex-shrink: [any integer];
flex-shrink: auto;
###Flex Basis Specifies the initial size of the flex item, before any available space is distributed according to the flex factors. Default is 0.
flex-basis: 0;
flex-basis: [any integer];
flex-basis: auto;
###Shorthand flex-grow value / flex-shrink value / flex-basis value
flex: 0 1 0;
###Useful default values for flex values
flex: initial;
//equivalent to flex: 0 1 auto;
flex: auto;
//equivalent to flex: 1 1 auto;
flex: none;
//equivalent to flex: 0 0 auto;
flex: integer;
//equivalent to flex: [integer] 1 0;