Master Web Layouts with CSS Flexbox

Before Flexbox, web developers had to rely on frustrating hacks like float: left, clearfix, and table-layouts just to put two items side by side. Today, the CSS Flexible Box Layout Module (Flexbox) is the global standard for building responsive website headers, card grids, and navigation menus.

Our interactive CSS Flexbox Generator allows you to visually experiment with containers and items. Simply drag the sliders and click the buttons to see how the boxes react in real-time, then copy the error-free CSS code straight into your stylesheet.

The Core Concepts of Flexbox

To master flexbox, you only need to understand two main concepts: The Container (Parent) and the Main Axis.

• The Flex Container: Flexbox only works if the parent element has display: flex; applied to it. All direct children of this container automatically become “flex items”.
• The Main Axis vs. Cross Axis: By default, the Main Axis runs horizontally from left to right (flex-direction: row;). If you change it to column, the Main Axis turns vertical.

Justify-Content vs. Align-Items vs. Align-Content

The most common confusion developers face is knowing when to use justify or align. Here is the golden rule:

• justify-content aligns items along the Main Axis. If your direction is a row, this moves items left, right, and center.
• align-items aligns items along the Cross Axis. If your direction is a row, this moves items up and down (vertically) on a single line.
• align-content aligns multiple lines of items. It only works if flex-wrap: wrap is active and there is extra vertical space in the container.

Pro Design Tip: To perfectly center a <div> inside another <div> (the holy grail of CSS), simply apply three lines to the parent container:
display: flex; justify-content: center; align-items: center;

What does Flex Wrap do?

By default, a flex container will try to squish all its items onto a single line, even if they run out of space (which causes horizontal scrolling bugs on mobile phones). By activating flex-wrap: wrap;, you tell the container to drop overflowing items onto a new line, which is the secret to building perfectly responsive grids!