Flexbox

Flexbox in short, is a set of properties in CSS introduced in 2009 to provide a new, exceptional layout system. The Flexbox module is identified as a part of the third version of CSS (CSS3).

Primary Button

Easily create 5 box layouts

Box 1

Box 2

Box 3

Box 4

Box 5

flexbox Has Many Benefits

With flexbox you can:

Reverse the order of the elements inside a Flexbox parent.
Wrap child elements in columns (number of columns can vary depending on child and parent height).
Specify the rate at which elements grow or shrink while the viewport size changes.
Control whether elements are shrinkable or not, regardless of the specified width unit type (relative or absolute).

Creating smart layouts

Flexbox “half and half” sections

A “half/half” layout is a full height layout with two columns, each with its content centered vertically. Using more traditional techniques, you could create this layout with floated elements (of width 50% each), clearing the floats into the wrapper (“clearfix” :before and :after, overflow: hidden, or a whacky <div> with clear: both; in the end). Yet it is a lot of work and the result is not as stable as what Flexbox provides.

Flexbox has many more benefits

With flexbox you can also:

Change the order of elements with CSS (combine this with media queries and you will find limitless possibilities in your flow).
Generate complex distributions of the elements to be equidistant with space around or just space between.
Generate “renegade” elements that flow differently (everyone to the left but one to the right, top/bottom… it’s your call).
And, most importantly, avoid the clear-fix hack for good!