A Beginner's Guide to CSS Flexbox

Published on: by Dr. Talib

For years, creating complex layouts on the web required clumsy hacks with floats and positioning. Thankfully, those days are over. CSS Flexbox is a modern, powerful layout module that gives you complete control over the alignment, direction, and order of elements in a container. This guide will introduce you to the core concepts you need to know.

The Two Core Concepts: Container and Items

The Foundation: Flexbox works by defining a flex container and the flex items inside it. You "turn on" Flexbox by setting an element's display property.

The Code: All you need to start is display: flex; on a parent element.

Base HTML Structure:


  
1

  
2

  
3

Activating Flexbox with CSS:

.flex-container {
  display: flex;
  background-color: #e0e0e0;
}
.item {
  background-color: #4f46e5;
  color: white;
  padding: 20px;
  margin: 10px;
}

Try it Yourself: Paste the full HTML and CSS into the HTML Viewer. Notice how the items immediately align in a row. This is the default behavior of Flexbox.

Controlling the Main Axis: justify-content

The Concept: The justify-content property controls how flex items are distributed along the main axis (horizontally, in a row).

The Solution: You can align items to the start, center, or end, or you can distribute the space between them.

Example CSS Rules:

/* Aligns items to the beginning of the container */
.flex-container { justify-content: flex-start; }

/* Aligns items to the center */
.flex-container { justify-content: center; }

/* Distributes space evenly between items */
.flex-container { justify-content: space-between; }

Try it Yourself: In the live editor, change the value of justify-content to center, flex-end, space-around, and space-between to see how the layout instantly changes.

Controlling the Cross Axis: align-items

The Concept: The _align-items_ property controls how flex items are aligned along the cross axis (vertically, in a row).

The Solution: This property allows you to vertically center items, stretch them to fill the container, or align them to the top or bottom.

Example CSS Rules:

/* (Assumes the container has a set height, e.g., height: 200px) */

/* Stretches items to fill the container's height (default) */
.flex-container { align-items: stretch; }

/* Aligns items to the vertical center */
.flex-container { align-items: center; }

/* Aligns items to the top */
.flex-container { align-items: flex-start; }

Try it Yourself: Add a height: 200px; to your .flex-container in the live editor. Now experiment with the different align-items values to see their effect.

Allowing Items to Wrap: flex-wrap

The Problem: By default, flex items will try to fit onto one line, even if it means overflowing their container. This is bad for responsive design.

The Solution: The flex-wrap property allows items to wrap onto the next line when they run out of space.

The CSS Fix:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* This is the magic property! */
}

Try it Yourself: Add more "item" divs to your HTML until they don't fit on one line. Then, add flex-wrap: wrap; to the container's CSS to see them wrap beautifully.

Flexbox is Your New Layout Superpower

This is just the beginning, but with display: flex, justify-content, and align-items, you can already solve the vast majority of common layout challenges. Mastering these fundamentals is the key to building modern, professional, and responsive websites with ease.

Open HTML Viewer now and start building flexible layouts today!