$' '

CSS Flexbox Guide with Examples: The Complete Layout Tutorial

Q: How do I center a div using Flexbox?

Apply display: flex, justify-content: center, and align-items: center to the parent container. This centers the child element both horizontally and vertically. The code is: .parent { display: flex; justify-content: center; align-items: center; }

Q: What is the difference between justify-content and align-items in Flexbox?

justify-content controls alignment along the main axis (horizontal by default), distributing space between items. align-items controls alignment along the cross axis (vertical by default). If flex-direction is column, these roles swap: justify-content becomes vertical and align-items becomes horizontal.

Q: Can I use Flexbox and CSS Grid together?

Absolutely. Flexbox and Grid are complementary, not competing. Use Grid for two-dimensional page-level layouts and Flexbox for one-dimensional component layouts within those grids. A common pattern is Grid for the overall page structure and Flexbox for navigation bars, card contents, and form layouts inside grid cells.

Published: April 2026 · 12 min read · Design Tools

CSS Flexbox has transformed how we build web layouts. Gone are the days of float hacks and clearfix workarounds. Flexbox provides a clean, intuitive way to align, distribute, and reorder elements — whether you're building a simple navigation bar or a complex responsive dashboard. This guide covers every Flexbox property with practical examples you can use today.

What Is CSS Flexbox?

Flexbox (Flexible Box Layout Module) is a CSS layout model designed for one-dimensional layouts — arranging items in a single row or column. Unlike traditional block or inline layouts, Flexbox gives you precise control over how space is distributed, how items align, and how they respond to different screen sizes.

Flexbox works on two levels: the flex container (parent) and flex items (children). Set display: flex on the parent, and all direct children become flex items that respond to Flexbox properties.

Flex Container Properties

These properties are applied to the parent element to control the overall layout behavior:

flex-direction

Controls the direction items are laid out:

.container {
    display: flex;
    flex-direction: row;        /* Default: left to right */
    /* flex-direction: column;  */ /* Top to bottom */
    /* flex-direction: row-reverse; */
    /* flex-direction: column-reverse; */
}

justify-content

Distributes space along the main axis (horizontal by default):

.container {
    display: flex;
    justify-content: flex-start;    /* Default: items packed to start */
    /* justify-content: flex-end; */    /* Items packed to end */
    /* justify-content: center; */      /* Items centered */
    /* justify-content: space-between; */ /* Equal space between */
    /* justify-content: space-around; */  /* Equal space around */
    /* justify-content: space-evenly; */  /* Equal space everywhere */
}

align-items

Aligns items along the cross axis (vertical by default):

.container {
    display: flex;
    align-items: stretch;      /* Default: items stretch to fill */
    /* align-items: flex-start; */ /* Items align to top */
    /* align-items: flex-end; */   /* Items align to bottom */
    /* align-items: center; */     /* Items centered vertically */
    /* align-items: baseline; */   /* Items align by text baseline */
}

flex-wrap

Controls whether items wrap onto multiple lines:

.container {
    display: flex;
    flex-wrap: nowrap;    /* Default: single line, items shrink */
    /* flex-wrap: wrap; */   /* Items wrap to next line */
    /* flex-wrap: wrap-reverse; */ /* Wrap in reverse order */
}

gap

Sets spacing between flex items without margins:

.container {
    display: flex;
    gap: 1rem;              /* Equal gap in all directions */
    /* gap: 1rem 2rem; */   /* Row gap 1rem, column gap 2rem */
}

Flex Item Properties

These properties are applied to individual children to control their sizing and alignment:

flex-grow, flex-shrink, flex-basis

The holy trinity of Flexbox sizing:

.item {
    flex-grow: 1;     /* How much the item should grow (default: 0) */
    flex-shrink: 1;   /* How much the item should shrink (default: 1) */
    flex-basis: auto; /* Initial size before growing/shrinking */
}

/* Shorthand: flex: grow shrink basis */
.item {
    flex: 1;        /* flex: 1 1 0% — grow equally, shrink equally */
    flex: 0 0 200px; /* Don't grow, don't shrink, fixed 200px */
    flex: 2;        /* Grow at 2x rate compared to flex: 1 items */
}

align-self

Override the container's align-items for a specific item:

.container { display: flex; align-items: center; }
.special-item { align-self: flex-end; /* This one goes to the bottom */ }

order

Change the visual order of items without modifying HTML:

.item-1 { order: 3; }  /* Appears last */
.item-2 { order: 1; }  /* Appears first */
.item-3 { order: 2; }  /* Appears middle */

Common Layout Patterns with Flexbox

1. Perfectly Centered Content

The most common Flexbox use case — centering anything:

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

2. Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}
.nav-logo { flex-shrink: 0; }
.nav-links { display: flex; gap: 1.5rem; }

3. Card Layout (Responsive Grid)

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.card {
    flex: 1 1 300px;    /* Grow, shrink, min 300px wide */
    max-width: calc(33.333% - 1rem); /* Max 3 per row */
}

4. Sticky Footer

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-header { /* ... */ }
.page-content { flex: 1; }  /* Takes all available space */
.page-footer { /* Sticks to bottom */ }

5. Media Object (Image + Text)

.media-object {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.media-object img { flex-shrink: 0; width: 80px; height: 80px; }
.media-body { flex: 1; }

6. Equal-Width Columns

.columns {
    display: flex;
    gap: 1rem;
}
.columns > * { flex: 1; }  /* All children equal width */

Flexbox vs. Other Layout Methods

Feature	Flexbox	Grid	Float
Dimensions	One-dimensional	Two-dimensional	One-dimensional
Alignment	Excellent	Excellent	Poor
Content-first	Yes	No (layout-first)	No
Responsive	Great	Great	Manual
Browser support	97%+	96%+	99%+

Best Practices

Use gap instead of margins — Cleaner, no margin collapse issues
Prefer flex: 1 over flex-basis: 100% — Simpler and more predictable
Min-width on flex items — Prevent items from shrinking below usable sizes
Don't overuse order — It can confuse keyboard navigation and screen readers
Combine with min-height: 100vh — For full-page layouts
Use a flexbox generator — For quick prototyping and learning

Frequently Asked Questions

What is CSS Flexbox and when should I use it?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model for arranging items in rows or columns. Use it when you need to distribute space dynamically, align items along an axis, or reorder elements within a container. It's ideal for navigation bars, card layouts, centering content, form layouts, and any component that flows in a single direction. Think "content-first" — Flexbox sizes based on content, not fixed grids.

How do I center a div using Flexbox?

Apply three properties to the parent container: display: flex, justify-content: center, and align-items: center. This centers the child element both horizontally and vertically. The complete CSS is: .parent { display: flex; justify-content: center; align-items: center; min-height: 100vh; } — this works for any element, regardless of its size.

What is the difference between justify-content and align-items in Flexbox?

justify-content controls alignment along the main axis (horizontal by default in a row layout), distributing space between items. align-items controls alignment along the cross axis (vertical by default). If you change flex-direction to column, these roles swap: justify-content becomes vertical alignment and align-items becomes horizontal alignment.

Can I use Flexbox and CSS Grid together?

Absolutely, and you should. Flexbox and Grid are complementary tools, not competing alternatives. Use CSS Grid for two-dimensional page-level layouts (header, sidebar, main content, footer) and Flexbox for one-dimensional component layouts within those grid cells (navigation items, card content, form rows, media objects). This combination gives you the best of both worlds.