CSS Flex-box Layout Module
Before the Flex-box Layout module, there were four layout modes:
  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element.
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Flex-box Elements
To start using the Flex-box model, you need to first define a flex container.
A flex container with three flex items:
<div class="flex-container">
Parent Element (Container)
Like we specified in the previous chapter,this is a flex container (the yellow area) with three flex items:
The flex container becomes flexible by setting the display property to flex
display: flex;

The flex container properties are