Flexbox Basics

Introduction

Flexbox is the most practical tool for one-dimensional layout in modern CSS. It makes alignment, spacing, and distribution much easier than legacy float or inline-block patterns. This chapter introduces Flexbox fundamentals so you can build common UI structures like nav bars, button groups, and card rows with predictable behavior.

Prerequisites

• Understanding of normal flow and display
• Basic sizing and box model knowledge
• Familiarity with margin, padding, and alignment basics

Why Flexbox

Flexbox is designed for one axis at a time:

• horizontal row layout
• vertical stack layout
• item alignment and spacing along that axis

Common use cases:

• navigation bars
• toolbars
• button rows
• card lists
• form field alignment

For two-dimensional page grids, Grid is usually better (next chapters).

Enable Flex Layout

Apply display: flex to a parent container:

.nav {
  display: flex;
}

Direct children become flex items automatically.

Main Axis and Cross Axis

Flexbox always has two axes:

• main axis: controlled by flex-direction
• cross axis: perpendicular to main axis

Default:

.row {
  display: flex;
  flex-direction: row;
}

Here:

• main axis = horizontal
• cross axis = vertical

If you switch to column, axes effectively swap.

flex-direction

Controls main axis direction:

• row (default)
• row-reverse
• column
• column-reverse

.stack {
  display: flex;
  flex-direction: column;
}

Use column for vertical component stacks when you still want flex alignment behavior.

justify-content (Main Axis Alignment)

Distributes items along the main axis.

Common values:

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

.toolbar {
  display: flex;
  justify-content: space-between;
}

Very useful for left-right split layouts (logo left, actions right).

align-items (Cross Axis Alignment)

Aligns items along the cross axis.

Common values:

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

.nav {
  display: flex;
  align-items: center;
}

Typical use: vertically center icons and text in a horizontal bar.

gap in Flexbox

Use gap to define spacing between flex items:

.actions {
  display: flex;
  gap: 0.75rem;
}

Benefits over margin hacks:

• cleaner spacing logic
• no extra “first/last item” exceptions
• easier maintenance

flex-wrap

By default, flex items stay on one line and may shrink aggressively.

Enable wrapping:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Useful for:

• responsive tag lists
• button groups
• card rows that should wrap on smaller widths

align-content (When Wrapping Exists)

align-content controls spacing between rows/columns of wrapped lines, not individual items.

It matters only when:

• flex-wrap is active
• there are multiple flex lines

Many beginners confuse align-content with align-items.

Common Starter Pattern

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

This single pattern solves many practical top-bar layouts.

Flex vs Margin Auto Tricks

In flex containers, margin-left: auto (or logical equivalents) is useful for pushing one item to the far end.

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
 
.nav-actions {
  margin-left: auto;
}

This is often cleaner than extra wrapper structures.

Common Mistakes

Debugging Flex in DevTools

When layout looks off:

1. Inspect container and confirm display: flex
2. Check computed flex-direction
3. Verify justify-content and align-items
4. Confirm if wrapping is enabled
5. Use browser flex overlay tools to visualize axes and item sizes

DevTools visualization dramatically speeds up Flexbox learning.

Mini Exercise

1. Build a header with logo, nav links, and action button
2. Use Flexbox to place logo left and actions right
3. Center all items vertically
4. Add gap between links
5. On smaller width, enable wrapping for nav group
6. Verify behavior in DevTools flex overlay

FAQ

Is Flexbox only for horizontal layout?

No. It works for both row and column directions. It is one-dimensional, not strictly horizontal.

When should I use Flexbox vs Grid?

Use Flexbox for one-axis alignment/distribution. Use Grid for two-dimensional layouts (rows and columns together).

Why is align-items: center not centering as expected?

You may be centering on the cross axis while expecting main-axis behavior. Check flex-direction.

Is gap supported in Flexbox?

Yes in modern browsers. It is the preferred spacing method for flex items.

Why are my items shrinking too much?

Flex items can shrink by default. You may need wrapping, width constraints, or item-level flex controls (covered next chapter).