Contact Us

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:

Name Chrome Firefox Safari Internet Explorer Opera
Version 29.0
21.0(-webkit-)
28.0
18.0(-moz-)
9.0
6.1(-webkit-)
11.0
10.0 (-ms-)
17.0

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:

Screenshot1

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:

Screenshot2

flex-flow:

It is shorthand property of above two properties.

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

Example:

Screenshot3

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:

Screenshot4

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:

Screenshot5

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:

Screenshot6

Properties for flex item:

order:

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

Example:

Screenshot7

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:

Screenshot8

align-self:

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

Example:

Screenshot9

Click To Download Full Source Code

Priya Patel

Priya Patel | Jr. Web Designer

I am a Web Designer at Yudiz Solutions Pvt. Ltd. In my free time I learn new things about latest web design tools and techniques.

Leave a Reply

Top
Yudiz Solutions Pvt. Ltd.
Career
Are you looking for a company where you are appreciated for your work?
Get a Free Quote
Tell Us Your Project Requirements

Career
Are you looking for a company where you are appreciated for your work?
Get a Free Quote
Tell Us Your Project Requirements