What Is CSS Flexbox?
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space among items in a container and aligns them efficiently, even when their sizes are dynamic or unknown. Introduced in CSS3, Flexbox has become the go-to layout method for building responsive navbars, card grids, form layouts, centering elements, and virtually any UI pattern that requires flexible alignment.
Before Flexbox, developers relied on floats, inline-blocks, and positioning hacks to create layouts. Flexbox solves all of these problems with a clean, intuitive API. This complete guide covers every Flexbox property with visual examples and real-world layout patterns you can copy directly into your projects.
Build Flexbox layouts visually with our free Flexbox Generator tool.
Flexbox Fundamentals: Container and Items
Flexbox works on two levels: the flex container (parent) and flex items (children). When you set display: flex on a container, all direct children become flex items that participate in the flex layout.
/* Enable Flexbox on a container */
.container {
display: flex; /* block-level flex container */
}
/* Or inline flex container */
.container-inline {
display: inline-flex; /* inline-level flex container */
}The flex container defines the main axis (direction items flow) and the cross axis (perpendicular to the main axis). By default, the main axis is horizontal (left to right) and the cross axis is vertical (top to bottom).
Container Properties
flex-direction
The flex-direction property defines the main axis direction — how flex items are placed in the container.
/* Row: items flow left to right (default) */
.container { display: flex; flex-direction: row; }
/* Row-reverse: items flow right to left */
.container { display: flex; flex-direction: row-reverse; }
/* Column: items flow top to bottom */
.container { display: flex; flex-direction: column; }
/* Column-reverse: items flow bottom to top */
.container { display: flex; flex-direction: column-reverse; }justify-content
The justify-content property aligns items along the main axis. It controls how extra space is distributed when items do not fill the entire container.
/* Pack items to the start (default) */
.container { justify-content: flex-start; }
/* Pack items to the end */
.container { justify-content: flex-end; }
/* Center items */
.container { justify-content: center; }
/* Equal space between items */
.container { justify-content: space-between; }
/* Equal space around items */
.container { justify-content: space-around; }
/* Equal space between and around items */
.container { justify-content: space-evenly; }align-items
The align-items property aligns items along the cross axis. In a row layout, it controls vertical alignment; in a column layout, horizontal alignment.
/* Stretch items to fill container (default) */
.container { align-items: stretch; }
/* Align items to the start of the cross axis */
.container { align-items: flex-start; }
/* Align items to the end of the cross axis */
.container { align-items: flex-end; }
/* Center items on the cross axis */
.container { align-items: center; }
/* Align items along their text baselines */
.container { align-items: baseline; }flex-wrap
By default, flex items try to fit on one line. The flex-wrap property controls whether items wrap to new lines when there is not enough space.
/* Do not wrap - all items on one line (default) */
.container { flex-wrap: nowrap; }
/* Wrap items to new lines */
.container { flex-wrap: wrap; }
/* Wrap items in reverse order */
.container { flex-wrap: wrap-reverse; }
/* Shorthand: flex-direction + flex-wrap */
.container { flex-flow: row wrap; }
.container { flex-flow: column nowrap; }gap
The gap property (formerly grid-gap) sets spacing between flex items without adding margins. It is the recommended way to add gutters in modern Flexbox layouts.
/* Same gap in both directions */
.container { display: flex; gap: 16px; }
/* Different row and column gaps */
.container { display: flex; gap: 16px 24px; }
/* row-gap: 16px, column-gap: 24px */
/* Individual properties */
.container {
display: flex;
row-gap: 16px;
column-gap: 24px;
}align-content
The align-content property aligns wrapped lines within the container along the cross axis. It only has an effect when flex-wrap: wrap is set and there are multiple lines of items.
/* Values same as justify-content */
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* pack lines to start */
align-content: flex-end; /* pack lines to end */
align-content: center; /* center lines */
align-content: space-between; /* equal space between lines */
align-content: space-around; /* equal space around lines */
align-content: stretch; /* stretch lines to fill (default) */
}Item Properties
flex-grow, flex-shrink, flex-basis
These three properties control how flex items grow, shrink, and their initial size. They are most commonly set via the flex shorthand.
/* flex-grow: how much an item should grow relative to others */
.item { flex-grow: 1; } /* take up available space equally */
.item { flex-grow: 0; } /* do not grow (default) */
.item-big { flex-grow: 2; } /* grow twice as much */
/* flex-shrink: how much an item should shrink */
.item { flex-shrink: 1; } /* shrink equally (default) */
.item { flex-shrink: 0; } /* do not shrink */
/* flex-basis: initial size before growing/shrinking */
.item { flex-basis: 200px; } /* start at 200px */
.item { flex-basis: 25%; } /* start at 25% of container */
.item { flex-basis: auto; } /* use content size (default) */
/* flex shorthand (recommended) */
.item { flex: 1; } /* flex: 1 1 0% */
.item { flex: auto; } /* flex: 1 1 auto */
.item { flex: none; } /* flex: 0 0 auto */
.item { flex: 0 0 200px; } /* fixed 200px, no grow, no shrink */
.item { flex: 1 0 300px; } /* at least 300px, can grow */order
The order property controls the visual order of flex items without changing the HTML source order. Items with lower order values appear first.
/* Default order is 0 for all items */
.item-first { order: -1; } /* appears first */
.item-normal { order: 0; } /* default position */
.item-last { order: 1; } /* appears last */align-self
The align-self property overrides the container's align-items for a single item, allowing individual cross-axis alignment.
/* Override container alignment for one item */
.container { display: flex; align-items: flex-start; }
.item-centered { align-self: center; }
.item-end { align-self: flex-end; }
.item-stretch { align-self: stretch; }
.item-auto { align-self: auto; } /* inherit from container */Common Flexbox Layout Patterns
1. Centering an Element (Horizontally and Vertically)
The classic centering problem that was notoriously difficult before Flexbox. Now it takes just three lines:
/* Perfect centering */
.center-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}2. Navigation Bar
A responsive navbar with a logo on the left and navigation links on the right:
/* Navbar layout */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
background: #1a1a2e;
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}3. Responsive Card Grid
A card grid that wraps responsively using flex-wrap and flex-basis:
/* Card grid */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 300px; /* min 300px, grow to fill space */
padding: 24px;
border: 1px solid #e2e8f0;
border-radius: 12px;
}4. Holy Grail Layout
The classic three-column layout with header and footer, achieved easily with nested Flexbox:
/* Holy Grail Layout */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer {
flex: 0 0 auto; /* fixed height */
padding: 16px;
}
.main-content {
display: flex;
flex: 1; /* take remaining space */
}
.sidebar-left {
flex: 0 0 200px; /* fixed 200px sidebar */
}
.content {
flex: 1; /* fill remaining width */
padding: 24px;
}
.sidebar-right {
flex: 0 0 200px; /* fixed 200px sidebar */
}5. Sticky Footer
A footer that sticks to the bottom of the viewport even when content is short:
/* Sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* main content fills available space */
}
footer {
flex-shrink: 0; /* footer never shrinks */
}6. Sidebar Layout
A fixed-width sidebar with a fluid main content area:
/* Sidebar + main content */
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 0 0 280px; /* fixed 280px sidebar */
background: #1e1e2e;
padding: 24px;
}
.main {
flex: 1; /* fill remaining width */
padding: 24px;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.layout {
flex-direction: column;
}
.sidebar {
flex: 0 0 auto;
}
}7. Input Group with Button
/* Input group */
.input-group {
display: flex;
}
.input-group input {
flex: 1; /* input takes available space */
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px 0 0 6px;
}
.input-group button {
flex-shrink: 0; /* button does not shrink */
padding: 8px 16px;
border-radius: 0 6px 6px 0;
}Flexbox vs CSS Grid: When to Use Each
Flexbox and CSS Grid are complementary, not competing, layout systems. Here is when to use each:
- Flexbox: Best for one-dimensional layouts (a single row OR column). Use for navbars, toolbars, card rows, centering, and component-level layouts.
- CSS Grid: Best for two-dimensional layouts (rows AND columns simultaneously). Use for full page layouts, complex grids, dashboards, and magazine-style layouts.
- Both together: Use Grid for the overall page structure and Flexbox for individual components within grid cells.
Browser Support
Flexbox is supported in all modern browsers: Chrome 29+, Firefox 28+, Safari 9+, Edge 12+, and all mobile browsers. The gap property for Flexbox requires Chrome 84+, Firefox 63+, Safari 14.1+. For older browsers, use margins as a fallback.
Frequently Asked Questions
How do I center a div with Flexbox?
Set display: flex; justify-content: center; align-items: center; on the parent container. This centers the child both horizontally and vertically. Add min-height: 100vh if you want to center within the full viewport.
What is the difference between flex: 1 and flex: auto?
flex: 1 is shorthand for flex: 1 1 0% — the item starts from zero width and distributes all available space equally among items. flex: auto is shorthand for flex: 1 1 auto — the item starts from its content size, then distributes remaining space. Use flex: 1 for equal-width columns and flex: auto when items should be sized by their content first.
How do I make a responsive layout without media queries?
Use flex-wrap: wrap with a flex-basis minimum: flex: 1 1 300px. Items will be at least 300px wide and wrap to the next row when they cannot fit. This creates a fully responsive grid without any @media queries.
Why is my flex item not shrinking?
Common causes: (1) The item has flex-shrink: 0, (2) the item has a min-width (text content sets an implicit min-width), or (3) the item has overflow not set. Add min-width: 0 or overflow: hidden to allow the item to shrink below its content size.
Can I use Flexbox and CSS Grid together?
Absolutely. They work perfectly together. A common pattern is to use CSS Grid for the overall page layout (header, sidebar, main, footer) and Flexbox for components within each grid area (navbar items, card content, form layouts). They complement each other rather than compete.