CSS Flexbox

CSS Flexbox Layout Module

Before the Flexbox 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.

Example

A flex container with three flex items:

Example :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

Example :

.flex-container {
  display: flex;}