CSS3 FLEX.txt

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning
A Flexible Layout must have a parent element with the display property set to flex.
Direct child elements(s) of the flexible container automatically becomes flexible items.

The flex container properties are:-
    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

The flex item properties are:-
    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

Property               	Description
display 	                 Specifies the type of box used for an HTML element
flex-direction 	Specifies the direction of the flexible items inside a flex container
justify-content 	Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items 	Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap 	          Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content 	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex                                   items, it aligns flex lines
flex-flow                   A shorthand property for flex-direction and flex-wrap
order 	                Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self 	                Used on flex items. Overrides the container's align-items property
flex 	                A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
__________________________________________________
FLEX CONTAINER CODES:-
display: flex,inline-flex;

flex-direction: row|row-reverse|column|column-reverse;

justify-content: flex-start|flex-end|center|space-between|space-around|initial|

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content: stretch|center|flex-start|flex-end|space-between|space-around

flex-flow: column wrap  //shorthand flex-direction flex-wrap
-------------------------------------------------------------------------------
FLEX ITEMS CODES:-

order: -1 -2 -3 0 1 2 3;
flex-grow:1 OR 3,4,5;  /*as well as use flex container*/
flex-shrink: 1 or 0;      /*make shrinkable box or not*/
flex-basis:200px;        /*instead of use max-width*/
flex: 1 1 20% ;       /*flex-grow flex-shrink flex-basis*/
align-self: auto|stretch|center|flex-start|flex-end|baseline

USE MARGIN PROPERTIES:-Remove totally float properties
margin:auto;
margin-right:auto;
margin-left:auto
__________________________________________