Getting started with CSS Flexbox

A fast Introduction to the popular Layout Module

Photo by Alora Griffiths on Unsplash

This introduction to CSS Flexbox, helps you to get a first impression. I will also show some examples to play around with. From here you will be able to integrate this powerful framework into your own projects.

The Flexible Box Model

CSS Flexbox is one way to design responsive layouts with CSS3. It is the first real possibility to create layouts with CSS. Floats were never meant for designing layouts and can only use it with workarounds.

It is also called the Flexible Box Model.

It is a layout mode or model, that makes it easier to position elements vertical or horizontal in a container.

Flexbox Diagram

Flexbox works with a container element — the so-called flex-container. With display: flex on the container element, you activate the flexbox.

CSS

.flex-container {
  display: flex;
}

And then inside that, we have child elements, called flex-items. The flexbox works exactly one level deep.