Flex-Box& Flex

For Better Understanding of Flex we have to know what is Flex-Box.

Flex-box:It is a new layout mode in CSS3. This layout make the elements behave relatively to different display sizes and display devices.

Flex-box have Flex-Container and Flex-Items.
Flex-container specifies the properties of parent.It is declared by setting the display property of flex or inline-flex.
Flex-items specifies the properties of children.These are inside flex-container.

Flex-items are set along horizantal flex line by default.
These are mainly two axis to align flex items in flex container they are main axis and cross axis.Those are perpendicular to each other.
Main axis is along the line of flex.It will be horizantal is line of axis is horizantal and viceversa.

Flex-Box Properties:-

Display => Used to specify the type of box used for an HTML ELement.
Flex-Direction => To specify the line of axis of flex items
Justify-Content => To align items horizantally when the items didn't use all the available space on main axis.
Align-items => To align items Vertically when the items didn't use all the available space on cross axis.
Flex-Wrap => It specifies whether flex items wrap or not,if there is not enough room for the flex item in container.
Align-Content => It aligns flex-line,it is used to modify the flex-wrap property.
Flex-Flow => It specifies a shorthand property for flex direction & flex wrap.
Order => It specifies the order of a flex item relatively to another flex item in the same container.
ALign-Self => It is used on flex-items it overrides container's Align items property.

Then,
The flex property is only works on the flex-items,It is used to set the length of the flexible items.The length of the flex items is depend on flex grow, flex shrink,flex basis.
We can simply say flex is the shorthand for these three properties.

"flex val1 val2 val3"

val1 refers to flex grow, It is positive number without units and it specifies how much the flex item have to grow in size relative to other flex items.
val2 refers to flex shrink, It is positive number without units and it specifies how much the flex item have to shrink in size relative to other flex items.
val3 refers to flex basis,It specifies the initial length of the flex item from where it have to start growing or shrinking.