How to Use Flexbox in CSS

What You’ll Build or Solve

Use Flexbox to control layout, spacing, and alignment in one dimension. By the end, you’ll be able to arrange elements in rows or columns, center content, and distribute space without floats or complex positioning.

When This Approach Works Best

This approach works best when you:

• Build navigation bars with evenly spaced links
• Center content vertically and horizontally
• Create responsive card rows that wrap on smaller screens
• Align buttons, icons, or form fields cleanly

Avoid Flexbox when you need full two-dimensional layout control across rows and columns. Use CSS Grid for that.

Prerequisites

• A basic HTML file
• A linked CSS file or <style> block
• Basic knowledge of div, section, and CSS selectors

Example structure used in this guide:

<divclass="container">
<divclass="box">One</div>
<divclass="box">Two</div>
<divclass="box">Three</div>
</div>

Step-by-Step Instructions

Step 1: Turn a Container into a Flex Container

Apply display: flex to the parent.

.container {
  display:flex;
}

All direct children become flex items arranged in a row by default.

What to look for:

• Items line up horizontally
• Width shrinks or expands based on available space

Step 2: Control the Main Axis Direction

By default, Flexbox arranges items in a row. Change direction using flex-direction.

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

To stack items vertically:

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

Use row for horizontal layouts and column for vertical stacks like sidebars or mobile menus.

Step 3: Align Items Along the Main Axis

Use justify-content to control spacing along the main axis.

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

Common values:

justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;

Use space-between for navigation bars and center for grouped content.

Step 4: Align Items Along the Cross Axis

Use align-items to align items vertically in a row layout.

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

Common values:

align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:stretch;

stretch is the default and expands items to match the container height.

Step 5: Allow Items to Wrap

Flexbox keeps items on one line unless you allow wrapping.

.container {
  display:flex;
  flex-wrap:wrap;
}

Combine with spacing:

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

Use wrapping for responsive card layouts.

Step 6: Control Individual Item Behavior

Each flex item can grow or shrink using flex.

.box {
  flex:1;
}

This makes items share equal width.

For more control:

.box {
  flex:2;
}

A higher number takes more space compared to siblings.

You can also use the longhand version:

.box {
  flex-grow:1;
  flex-shrink:1;
  flex-basis:200px;
}

flex-basis sets the starting size before growth or shrinkage happens.

Examples You Can Copy

Example 1: Center Content Inside a Section

<sectionclass="hero">
<h1>Welcome</h1>
</section>

.hero {
  display:flex;
  justify-content:center;
  align-items:center;
  height:300px;
}

Example 2: Create a Navigation Bar

<navclass="navbar">
<ahref="#">Home</a>
<ahref="#">About</a>
<ahref="#">Contact</a>
</nav>

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

Example 3: Responsive Card Layout

<divclass="cards">
<divclass="card">A</div>
<divclass="card">B</div>
<divclass="card">C</div>
</div>

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

.card {
  flex:11200px;
}

Cards expand but wrap when space runs out.

Example 4: Vertical Sidebar Layout

<divclass="sidebar">
<button>Dashboard</button>
<button>Settings</button>
<button>Logout</button>
</div>

.sidebar {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

Common Mistakes and How to Fix Them

Mistake 1: Applying display: flex to the Child

What you might do:

.box {
  display:flex;
}

Why it breaks:

Flexbox only affects direct children of a flex container. If the parent is not flex, items will not align as expected.

Correct approach:

.container {
  display:flex;
}

Mistake 2: Confusing justify-content and align-items

What you might do:

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

Expecting horizontal centering in a row layout.

Why it breaks:

align-items controls the cross-axis. In a row layout, that means vertical alignment.

Correct approach:

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

Use justify-content for horizontal alignment in rows.

Troubleshooting

If items do not align, confirm the parent has display: flex.

If vertical centering does nothing, check that the container has height.

If wrapping fails, confirm flex-wrap: wrap is set.

If spacing looks uneven, inspect gap or margins on child elements.

If layout breaks on mobile, review flex-direction and width rules.

Quick Recap

• Apply display: flex to the parent
• Use flex-direction to control row or column
• Use justify-content for main-axis alignment
• Use align-items for cross-axis alignment
• Use flex-wrap and flex for responsive layouts