Introduction

Introduction

What is FlexBox

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.

Before FlexBox, we were mainly using floats for layout. we all know the frustrations and limitations of the old way -- especially the ability to vertically center inside a parent. Ugh, that was so annoying! Not anymore! FlexBox for the win!

Compared to CSS Grid (which is bi-dimensional), FlexBox is a one-dimensional layout model. It will control the layout based on a row or on a column, but not together at the same time.

The main goal of Flexbox is to allow items to fill the whole space offered by their container, depending on some rules you set.

Flexbox is the tool that lets you forget about using

• Table layouts

• Floats

• clearfix hacks

• display: table hacks