CSS Flexbox Tutorials

1

Getting Started with Flexbox

Learn the fundamentals of CSS Flexbox by creating your first flex container and understanding how items behave inside it.

Step 1: Create a Flex Container

Any element can become a flex container by adding display: flex. All direct children automatically become flex items.

.container {
  display: flex;
}

Step 2: Understand the Default Behavior

By default, flex items are placed in a row (left to right), don't wrap, and stretch to fill the container's height. Items take only the space their content needs along the main axis.

Step 3: Try It in the Generator

Open our Flexbox Generator and start with the default settings. Add items and watch how they arrange in a row. Then try changing the flex-direction to column to see items stack vertically.

2

Master Centering with Flexbox

Centering elements was one of the hardest problems in CSS — until Flexbox. Learn the different centering techniques available.

Horizontal Centering

Use justify-content: center to center items horizontally along the main axis.

.container {
  display: flex;
  justify-content: center;
}

Vertical Centering

Use align-items: center to center items vertically along the cross axis.

.container {
  display: flex;
  align-items: center;
  min-height: 100vh; /* full viewport height */
}

Perfect Centering (Both Axes)

Combine both properties to perfectly center content in any container.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

See this in action in our Hero Section example.

3

Build a Responsive Navigation Bar

Navigation bars are one of the most common Flexbox use cases. Learn how to build one that works on all screen sizes.

Step 1: Layout with Space-Between

Use justify-content: space-between to push the logo and nav links to opposite sides.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

Step 2: Group Nav Links

Nest a flex container for the navigation links with a gap between them.

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

Step 3: Make It Responsive

Use flex-direction column on smaller screens to stack the navigation vertically.

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
}

See the complete example: Navigation Bar Example.

4

Create a Responsive Card Grid

Build a flexible card grid that automatically adjusts the number of columns based on available space.

Step 1: Set Up the Grid Container

Use flex-wrap: wrap to allow cards to flow to the next row.

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

Step 2: Set Card Sizing

Use flex-basis with flex-grow to create cards that fill available space while maintaining a minimum width.

.card {
  flex: 1 1 300px; /* grow, shrink, min-width */
  max-width: 400px; /* prevent cards from getting too wide */
}

See it in action: Card Grid Example.

5

Build the Holy Grail Layout

The classic three-column layout with header and footer — once notoriously difficult, now simple with Flexbox.

Step 1: Full-Height Page Structure

Use a column flex container for the overall page layout.

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1; /* takes all available vertical space */
}

Step 2: Three-Column Body

Nest a row flex container inside the main content area for the sidebar-content-sidebar layout.

.main-content {
  display: flex;
  flex: 1;
}

.sidebar { flex: 0 0 250px; }
.content { flex: 1; }
.aside   { flex: 0 0 200px; }

Step 3: Responsive Adaptation

Stack columns vertically on mobile screens.

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  .sidebar, .aside {
    flex: none;
  }
}

Explore more: Dashboard Layout Example.

6

Master Flexbox Spacing

Learn the different ways to control spacing between flex items using justify-content, gap, and margin techniques.

Using justify-content for Distribution

Distribute items with even spacing using the different justify-content values.

/* Equal space between items */
.container { justify-content: space-between; }

/* Equal space around items */
.container { justify-content: space-around; }

/* Perfectly equal spacing */
.container { justify-content: space-evenly; }

Using the gap Property

The gap property provides consistent spacing between items without affecting the edges.

.container {
  display: flex;
  gap: 1rem;        /* same gap in both directions */
  row-gap: 2rem;    /* vertical gap when wrapping */
  column-gap: 1rem; /* horizontal gap */
}

Auto Margins for Pushing Items

Use margin-left: auto on a flex item to push it and all following items to the right — perfect for right-aligning the last nav item.

.push-right {
  margin-left: auto; /* pushes this item to the far right */
}

Try different spacing in the Flexbox Generator — select different justify-content values and see how spacing changes.

FLEXBOX GENERATOR