CSS – An Introduction to Flexbox

The Flexible Box Layout Module (Flexbox) is a useful and easy-to-use CSS module that helps us to make our content responsive. Flexbox takes care of any spacing calculations for us, and it provides a bunch of ready-to-use CSS properties for structuring content.
You can play with some sample code here.

Flexbox has two components, a parent container and child items. Flexbox module provides us with a set of different CSS properties. We apply some of those properties on the parent container, also called a flex container and others on its collection of children or flex items.

For example:
Consider the following block.

<div class='container'>
    <div>item 1</div>
    <div>item 2</div> 
</div>

To apply a flexbox layout to the above block, we just need to add a CSS property of display:flex to it.

.container {
   display: flex
 }

When we set the display property to flex for any element. It becomes a flex container and all child items of the container become flex items.

This applies a few defaults on the items inside the container, eg.

The default direction is row . Items start from the starting edge of the main axis. Items do not stretch out on the main dimension but can shrink. Items will stretch to fill the size of the cross axis. flex-basis is set to auto, and flex-wrap is set to nowrap.

Properties for the flex container:

flex-direction -the direction of the content (horizontal or vertical)
flex-wrap - control wrapping of items in one line or multiple lines
flex-flow - shorthand for flex-direction and flex-wrap
justify-content - control layout positioning on the main axis (horizontal positioning)
align-items - control layout positioning on the cross axis (vertical positioning)
align-content - control layout alignment when there is multiline content.

Properties for the flex items:

order - control the order or appearance of the items inside the container.
flex-grow - controls the stretch behaviour of items relative to other items, or how much space an item can take up to fill the space.
flex-shrink - controls the shrink behaviour of items relative to the other items, or how much smaller an item can become when adjusting for space.
flex-basis - specifies the initial length of a flex item.
flex - shorthand for the flex-grow, flex-shrink, and flex-basis
align-self - specify the alignment of the individual item inside flex container; this also overrides the default alignment set by align-items.

Flexbox is meant for one-dimensional layout, meaning you can create a layout for your content in one direction, either horizontal or vertical.

To understand more about the concept of directions, we need to learn about the concept of axis followed by flexbox layout. Axis are the core to understand the flexbox layout.

In flexbox we have:
main axis: horizontal or left to right or right to left.
cross axis: vertical, top to bottom or bottom to top.

We can change direction by using the flex-direction property. The default value for flex-direction is row, which means the content is displayed horizontally. For cross-axis, we can assign it to column value.

flex property - We can use flex property on flex items to make them responsive. The flex property is a shorthand for three other properties, flex-grow, flex-shrink, flex-basis. It is better than setting percentage width of the items, e.g. width: 33.333%

Ordering items:
We can change the order in which items appear with order property.
Default is 0.

I have created a codepen with some typical usage example of the flex layout.
You check also check out A Complete Guide to Flexbox and Basic Concepts of flexbox for more details about the flexbox layout.