How to Use Flexbox: A Practical Guide

Matthew

Flexbox (Flexible Box Layout) is one of the most powerful tools in CSS for building responsive, one‑dimensional layouts. It makes aligning, spacing, and ordering elements much easier compared to older techniques like floats or inline‑blocks.

In this article, you’ll learn what Flexbox is, how it works, and how to use it effectively with real examples.

What Is Flexbox?

Flexbox is a CSS layout module designed for laying out items in one direction at a time—either as a row or a column.

It is ideal for:

  • Navigation bars
  • Cards and grids (in one direction)
  • Centering elements (finally!)
  • Responsive layouts without media queries

If you need two‑dimensional layouts (rows and columns), CSS Grid may be a better fit. But for most UI components, Flexbox is perfect.

Core Concepts

Before writing any code, it’s important to understand Flexbox terminology.

Flex Container vs Flex Items

  • Flex container: the parent element with display: flex
  • Flex items: the direct children of the container
.container {
  display: flex;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

flex-direction defines the main axis (the direction items are laid out).

.container {
  display: flex;
  flex-direction: row; /* default */
}

Common values:

  • row → left to right
  • row-reverse → right to left
  • column → top to bottom
  • column-reverse → bottom to top
.container {
  flex-direction: column;
}

Justify Content (Main Axis)

justify-content controls how items are spaced along the main axis.

.container {
  justify-content: space-between;
}

Popular values:

  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
  • space-evenly

This is commonly used for navigation bars and evenly spaced layouts.

Align Items (Cross Axis)

align-items controls alignment perpendicular to the main axis.

.container {
  align-items: center;
}

Common values:

  • stretch (default)
  • center
  • flex-start
  • flex-end
  • baseline

Perfect Centering with Flexbox

One of the most popular Flexbox use cases is centering content both horizontally and vertically.

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

This works reliably across modern browsers and replaces many old hacks.

Flex Wrap

By default, Flexbox tries to fit all items on one line.

.container {
  flex-wrap: wrap;
}

Values:

  • nowrap (default)
  • wrap
  • wrap-reverse

This is useful for responsive card layouts.

Gap (Spacing Between Items)

Instead of using margins, Flexbox supports gap.

.container {
  display: flex;
  gap: 16px;
}

This keeps spacing consistent and cleaner than margins.

Flex Properties on Items

Flexbox also allows individual items to control how they grow and shrink.

flex-grow

.item {
  flex-grow: 1;
}

Allows an item to take up available space.

flex-shrink

Controls how items shrink when space is limited.

flex-basis

Defines the initial size of an item.

.item {
  flex-basis: 200px;
}

Shorthand: flex

.item {
  flex: 1 1 200px;
}

Ordering Items

You can change visual order without changing HTML.

.item {
  order: 2;
}

Lower values appear first.

Common Flexbox Patterns

Navigation Bar

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Card Layout

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

When to Use Flexbox

Use Flexbox when:

  • Layout is one‑dimensional
  • You need flexible alignment
  • Content size is dynamic

Avoid Flexbox when:

  • You need strict rows and columns → use CSS Grid

Final Thoughts

Flexbox simplifies modern CSS layout by removing complexity and hacks. Once you understand the main axis, cross axis, and a few key properties, you can build responsive layouts with confidence.

Mastering Flexbox is an essential step toward becoming a strong front‑end developer.

Leave a Reply