CSS Flexbox — Complete Layout Guide with Examples
What is Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space and aligns items in a container - either in a row or a column. It solves common layout problems like vertical centering, equal-height columns, and space distribution that were difficult with floats.
Flexbox has two types of elements: the flex container (parent with display: flex) and flex items (direct children).
Flex Container Properties
.container {
/* Enable flexbox */
display: flex; /* block-level flex container */
display: inline-flex; /* inline-level flex container */
/* flex-direction - main axis direction */
flex-direction: row; /* â†' default: left to right */
flex-direction: row-reverse; /* � right to left */
flex-direction: column; /* â†" top to bottom */
flex-direction: column-reverse; /* â†' bottom to top */
/* flex-wrap - should items wrap? */
flex-wrap: nowrap; /* default: all on one line */
flex-wrap: wrap; /* wrap to next line */
flex-wrap: wrap-reverse; /* wrap upward */
/* flex-flow - shorthand for direction + wrap */
flex-flow: row wrap;
/* justify-content - alignment along MAIN axis */
justify-content: flex-start; /* default: pack to start */
justify-content: flex-end; /* pack to end */
justify-content: center; /* center */
justify-content: space-between; /* equal gaps between items */
justify-content: space-around; /* equal gaps around items */
justify-content: space-evenly; /* equal gaps everywhere */
/* align-items - alignment along CROSS axis (single line) */
align-items: stretch; /* default: fill cross axis */
align-items: flex-start; /* align to start of cross axis */
align-items: flex-end; /* align to end */
align-items: center; /* center on cross axis */
align-items: baseline; /* align text baselines */
/* align-content - alignment of MULTIPLE lines */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch; /* default */
/* gap - space between items */
gap: 20px; /* row and column gap */
gap: 10px 20px; /* row-gap column-gap */
row-gap: 10px;
column-gap: 20px;
}Flex Item Properties
.item {
/* order - visual order (default: 0) */
order: 2; /* appears after items with order 0 and 1 */
/* flex-grow - how much item grows to fill space (default: 0) */
flex-grow: 1; /* takes equal share of remaining space */
flex-grow: 2; /* takes twice as much as flex-grow: 1 items */
/* flex-shrink - how much item shrinks when space is tight (default: 1) */
flex-shrink: 0; /* never shrink */
flex-shrink: 2; /* shrinks twice as fast */
/* flex-basis - initial size before grow/shrink (default: auto) */
flex-basis: 200px; /* start at 200px */
flex-basis: 0; /* start at 0, grow from there */
flex-basis: auto; /* use item's width/height */
/* flex - shorthand: grow shrink basis */
flex: 1; /* flex: 1 1 0 - equal flexible items */
flex: 0 0 200px; /* fixed 200px, no grow/shrink */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto - rigid */
/* align-self - override container's align-items for this item */
align-self: auto; /* inherit from container */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
}Practical Flexbox Patterns
/* Perfect centering - horizontal and vertical */
.center-everything {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
/* Equal-width columns */
.columns {
display: flex;
gap: 20px;
}
.column {
flex: 1; /* each column takes equal space */
}
/* Sidebar layout - sidebar fixed, content flexible */
.layout {
display: flex;
gap: 20px;
}
.sidebar { flex: 0 0 250px; } /* fixed 250px */
.content { flex: 1; } /* takes remaining space */
/* Card grid with wrapping */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* min 300px, grows to fill */
max-width: 400px;
}
/* Push last item to end */
.toolbar {
display: flex;
align-items: center;
gap: 10px;
}
.toolbar .spacer { flex: 1; } /* pushes items after it to the right */
/* Sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; } /* grows to fill space, pushing footer down */
footer { flex-shrink: 0; }Level Up Your Css Skills
Master Css with these hand-picked resources
10,000+ learners
Free forever
Updated 2026
Key Takeaways
- Flexbox is a one-dimensional layout system - it handles either a row or a column at a time.
-
display:flexon the parent makes all direct children flex items. -
justify-contentaligns items along the main axis;align-itemsalong the cross axis. -
flex-wrap:wrapallows items to wrap to the next line when they overflow. -
flex:1on items makes them grow equally to fill available space. -
Use
gapinstead of margins between flex items - it is cleaner and more predictable. - Flexbox is best for components (nav, cards, buttons); use CSS Grid for full page layouts.
Common Mistakes to Avoid
WRONG
margin: 0 10px on flex items
RIGHT
gap: 10px on flex container
gap is the modern way to space flex items - no need for margin hacks.
WRONG
width:50% on flex items without flex-wrap
RIGHT
flex:0 0 50% with flex-wrap:wrap
Use flex shorthand to control sizing. Without flex-wrap, items may overflow.
WRONG
align-items to center horizontally
RIGHT
justify-content to center horizontally
justify-content controls the main axis (horizontal by default). align-items controls the cross axis (vertical by default).
Frequently Asked Questions
Related CSS Topics
