Getting Started With FLEXIBLE BOX

Click To Download Full Source Code

What is flexible box?

Flexbox (Flexible Box) is the new layout mode in CSS3. It does not use float to display the flex items side by side. It comprises of flex container and flex item/s. Flex Container is defined by assigning display: flex or inline-flex property. Its immediate items will now be flex items.
Browser Support: It is fully supported in first version mentioned in the below table:

Properties for Flex Container:

flex-direction:

It is used to display the items horizontally or vertically. It has following values:

• row (default) – It aligns the flex items left-to-right.
• row-reverse – It aligns the flex items right-to-left.
• column – It aligns the flex items top-to-bottom.
• column-reverse – It aligns the flex items bottom-to-top.

Example:

.flex-row { flex-direction: row; -webkit-flex-direction: row; }
.flex-row-reverse    { flex-direction: row-reverse; -webkit-flex-direction: row-reverse;}
.flex-column { flex-direction: column; -webkit-flex-direction: column; }
.flex-column-reverse{ flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}

flex-wrap:

It specifies whether the flex items should wrap or not. It has following values:

• nowrap (default) – It is used to shrink flexible items to fit within the width of the flex container.
• wrap – Flex items will be displayed into multiple rows/columns if needed.
• wrap-reverse – As name represents it works in the same way as wrap but in reverse order.

Example:

.flex-wrap { flex-wrap: wrap; -webkit-flex-direction: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse;}

flex-flow:

It is shorthand property of above two properties.

flex-flow: <flex-direction> || <flex-wrap>

Example:

.row-wrap { flex-flow: row nowrap; -webkit-flex-flow: row nowrap; }
.column-wrap { flex-flow: column wrap; -webkit-flex-flow: column wrap; }
.column-reverse-wrap-reverse    { flex-flow: column-reverse wrap-reverse; -webkit-flex-flow: column-reverse wrap-reverse; }

justify-content:

This property aligns the flex items along main (horizontal) axis. Values are:

• flex-start (default) – It aligns items to left end of the flex container.
• flex-end – It aligns items to the right end of the flex container.
• center – It center aligns items within the flex container.
• space-around – As name suggests it will leave empty space around each flex items along the horizontal axis.
• space-between – It will equally distribute the empty space between flex items but the first and last flex item will be aligned to the ends of flex container along the horizontal axis.

Example:

.flex-start { justify-content: flex-start; -webkit-justify-content: flex-start; }
.flex-end { justify-content: flex-end; -webkit-justify-content: flex-end; }
.center { justify-content: center; -webkit-justify-content: center; }
.space-around    { justify-content: space-around; -webkit-justify-content: space-around; }
.space-between     { justify-content: space-between; -webkit-justify-content: space-between; }

align-items:

This property aligns the flex items along cross (vertical) axis. Values are:

• stretch (default) – It stretches items between cross-start(top) and cross-end(bottom) of the flex container.
• flex-start – It vertically aligns items to top of the flex container.
• flex-end – It vertically aligns items to bottom of the flex container.
• center – It is used to vertically center align the single row of flex items within the flex container.
• baseline – As name suggest it vertically aligns the items based on its baseline.

Example:

.flex-start { align-items: flex-start; -webkit-align-items: flex-start; }
.flex-end { align-items: flex-end; -webkit-align-items: flex-end; }
.center { align-items: center; -webkit-align-items: center; }
.baseline { align-items: baseline; -webkit-align-items: baseline; }
.item:nth-of-type(1) { font-size: 50px; line-height: 60px;}

align-content:

This property aligns the flex lines along cross (vertical) axis. Also note that wrapping of the flex items is needed for this property. Values are as follows:

• stretch (default) – It stacks the items in row to distribute the free vertical space in which first row is stacked towards the cross-start.
• flex-start – All flex items are stacked towards the cross-start (top) of flex container.
• flex-end – All flex items are stacked towards the cross-end (bottom) of flex container with the free vertical space left above it.
• center – It is used to vertically center align the rows of flex items across the cross-axis.
• space-between – It will equally distribute the empty space between flex items but the first and last flex item will be aligned to the ends of flex container along the vertical axis.
• space-around – As name suggests it will leave empty space around each flex items along the vertical axis.

Example:

.flex-start { align-content: flex-start; -webkit-align-content: flex-start; }
.flex-end { align-content: flex-end; -webkit-align-content: flex-end; }
.center    { align-content: center; -webkit-align-content: center; }
.space-around    { align-content: space-around; -webkit-align-content: space-around; }
.space-between     { align-content: space-between; -webkit-align-content: space-between; }

Properties for flex item:

order:

This property is used to reorder the flex items. Default value is 0.

Example:

.item:nth-of-type(1) { order: 3; -webkit-order: 3; }
.item:nth-of-type(3) { order: 4; -webkit-order: 4; }
.item:nth-of-type(4) { order: 1; -webkit-order: 1; }
.item:nth-of-type(5) { order: 0; -webkit-order: 0; }

flex-grow:

This property specifies the value by which flex items grow to cover the free space. If same value is given to all flexible items then all the flex item will be of same size. Default value is 0. Negative numbers are not allowed.

flex-shrink:

This property specifies the value by which item shrinks. Default value is 1 so all flex items shrink to fit within the flex container. Negative numbers are not allowed.

flex-basis:

This property specifies the width of the item. Default value is auto.

flex:

The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. The flex property basically defines the length of the item, relative to the other flex items inside the same container. It is shorthand property in CSS.

flex: flex-grow flex-shrink flex-basis;
Its default value is: flex: 0 1 auto;

Example:

.flex-container { flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 600px; height: 150px; }    
.item { width: 60px; }
.item:nth-of-type(1) { flex: 1 0 40px; -webkit-flex: 1 0 40px; }
.item:nth-of-type(2) { flex: 0 1 50px; -webkit-flex: 0 1 50px; }
.item:nth-of-type(3) { flex-grow: 2; -webkit-flex: 2; }

align-self:

This property allows to override the align-items property of flex container. Default value is auto.

Example:

.flex-container { width: 400px; height: 150px; }    
.item { width: 60px; }
.item:nth-of-type(1) { align-self: center; -webkit-align-self: center; }