CSS-FLEX

 

 CSS FLEX 

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.
Example
A flex container with three flex items:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div></div>
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
Example
flex-container 
{
display: flex;
}

The flex container properties are