CSS Flexbox Tutorial

Flexbox is a new module in CSS3 that makes it easy to align elements to one another in different directions and orders.

The main idea behind flexbox is to give the container the ability to expand and to shrink elements to best use all available space.

All the element on which we use flexbox is called the Flex Container.

All the direct children of flex container is known as flex items. Now the direction which flex items are laid out is known as main axis. Then the other perpendicular items is known as cross axis.

You can learn flexbox by practically doing it on that link.

See the Pen Flexbox Tutorial by Mujtaba Abid (@mujju88) on CodePen.