Design & CSS
CSS Flexbox Complete Guide: Layout Made Easy
10 min read · Updated 2025
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that lets you control how elements are arranged, aligned, and distributed inside a container. It replaced decades of float-based and table-based layout hacks, making complex layouts achievable with just a few properties.
The Two Actors: Container and Items
Flexbox has two levels: the flex container (the parent with display: flex) and flex items (the direct children). Container properties control the layout; item properties override individual behaviour.
Container Properties
| Property | Values | Effect |
|---|---|---|
display | flex | inline-flex | Activates Flexbox on the container |
flex-direction | row | column | row-reverse | column-reverse | Sets the main axis direction |
justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly | Aligns items along main axis |
align-items | stretch | flex-start | flex-end | center | baseline | Aligns items along cross axis |
flex-wrap | nowrap | wrap | wrap-reverse | Whether items wrap to new lines |
gap | length | Space between flex items |
Item Properties
| Property | Description |
|---|---|
flex-grow | How much the item grows relative to others (0 = no growth) |
flex-shrink | How much the item shrinks relative to others (0 = won't shrink) |
flex-basis | Initial size before growing/shrinking |
flex | Shorthand: flex-grow flex-shrink flex-basis |
align-self | Override align-items for a specific item |
order | Change visual order without changing HTML order |
Common Patterns
Perfect Centering
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Navbar with Logo Left + Links Right
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Equal-Width Cards
.card-container {
display: flex;
gap: 1rem;
}
.card {
flex: 1; /* Each card takes equal share of available width */
}Sticky Footer
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* Pushes footer to bottom */
}Experiment with all Flexbox properties in BrainBoost's CSS Flexbox Playground. Also try the CSS Grid Playground for two-dimensional layouts.
Frequently Asked Questions
Apply display: flex; justify-content: center; align-items: center; to the parent container. This centres the child both horizontally and vertically.
justify-content controls alignment along the main axis (horizontal by default). align-items controls the cross axis (vertical by default). These axes swap when flex-direction is column.
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The item will grow to fill available space and shrink if needed. Used to make multiple items share space equally.