CSS3 Flexible Box / FlexBox

On 12.28.12, In BLOG, BLOGGING, css, CSS3, Flex Box, by

Key Words & Phrases

Flex Container
-Parent element in which flex item are located in

Flex item
-The child of a flex container (the parent).

Direction
-Leftwards
-Rightwards
-Downwards
-Upwards

What Are Flexible Box/Flex Box

Flexible Box/Flex Box is a box model optimized for interface design in CSS3. One of the major pros of flexible box/flex box is that floats are not used. Flexible Box/Flex Box is easy to use and powerful tool for distributing space and aligning contents. Using flexible bix/flex box box model flex containers are used this can be considered as the parent. The parent naturally has children; the children are termed as flex item. The flex items have numerous advantages some of these are:
-They can be laid out in any direction
-They can “flex” their size to fill unused or available space
-They can shrink to avoid overflowing the parent (flex container)
-Their style order can be rearranged at the style layer

Implementing the Flex Layout

Implementing the Flexible Box/Flex Box
Set the “display” property to -ms-flexbox (block-level ) or -ms-inline-flexbox (inline)
To set the orientation of the flex-items (children) set property “-ms-flex-direction” to either row or row-reverse or column or column-reverse or inherit.

Creating the Flex Container
Sample Code 

Entire Code 

Output