Intro to Flexbox

In this quick tutorial, we will walk through setting up a very simple Flexbox layout. Flexbox is an incredibly powerful module that allows you to set your layout in CSS in an intuitive and simple. It is particularly useful for building dimension layouts.

The main idea behind Flexbox is that empty space inside a container element can be automatically divided by its child element. Therefore Flexbox makes it easy to automatically align items to another inside a parent container, both horizontally and vertically.

Prior to Flexbox and CSS grid, web developers relied on floats (and manually setting widths, heights, margins, padding, etc.) in order to create layouts. With fewer and cleaner HTML and CSS Code, developers can use Flexbox to easily vertically center items and create equal-height columns.

Flexbox Terminology

Before we code our simple Flexbox layout, let’s go over some important terminology.

The container (parent element) that we use Flexbox on is called the flex container. To set up the flex container, all that needs to have is set the CSS display property to flex.

All the direct children of the flex container (i.e HTML elements within the parent container) are known as the flex items.

The horizontal direction of these flex items is called the maine axis while the vertical direction is the cross axis.

Flexbox Example

In this simple example, we have a div element with a class of container that will be our parent element. Inside of our container, we have three divs that are child elements.

This is what our basic HTMl structure looks like without Flexbox.

In our CSS file, all we need to do to simply set the parent container to flex. There are additional properties that we can use with Flexbox which gives us more control of our layout.

In this example, I used gap to create spacing between the flex items as well as align-items which aligns the items along the cross axis (vertically).

Now, let’s take a look at our newly created Flexbox layout.

Voila! There you have it. Your first, simple Flexbox layout. I recommend using Flexbox for simple 1D component layouts like the example shown above.