What is Flexbox?
CSS Flexible Box Layout (Flexbox) is a one-dimensional layout model that distributes space among items in a container and gives you powerful alignment capabilities along a single axis.
TL;DR
- 1.Flexbox lays out items in one direction at a time -- either a row or a column.
- 2.The parent gets
display: flex; children automatically become flex items. - 3.
justify-contentcontrols spacing along the main axis;align-itemscontrols alignment along the cross axis. - 4.For two-dimensional layouts (rows AND columns), use CSS Grid instead.
Simple Explanation
Imagine you have a bookshelf with a single row of books. Flexbox is like the rules for how those books sit on the shelf:
- You can push them all to the left, center them, or spread them evenly across the shelf (justify-content).
- You can align them to the top edge, bottom edge, or center them vertically (align-items).
- Some books can be told to take up more space than others (flex-grow).
- If there are too many books, you can let them wrap to a second row (flex-wrap).
The bookshelf is the flex container and each book is a flex item. You set the rules on the shelf and the books follow.
How It Works
To create a flex layout, you add display: flex to the parent element. Every direct child automatically becomes a flex item.
Basic horizontal row
.container {
display: flex;
gap: 16px;
}Centered both axes
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}Space between items
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Key Properties
flex-directionrow | row-reverse | column | column-reverse
Sets the main axis direction. row is the default (left to right).
justify-contentflex-start | center | flex-end | space-between | space-around | space-evenly
Distributes items along the main axis.
align-itemsstretch | flex-start | center | flex-end | baseline
Aligns items along the cross axis.
flex-wrapnowrap | wrap | wrap-reverse
Controls whether items wrap to new lines when they overflow.
gapany length (e.g. 16px, 1rem)
Adds consistent spacing between flex items without margins.
flexflex-grow flex-shrink flex-basis (e.g. 1 0 auto)
Shorthand for how a flex item grows, shrinks, and its initial size.
Common Mistakes
Don't
/* Applying flex properties to
a non-flex container */
.parent {
justify-content: center;
/* Missing display: flex! */
}Do
.parent {
display: flex;
justify-content: center;
}Don't
/* Using margin for spacing
between flex items */
.item {
margin-right: 16px;
}
.item:last-child {
margin-right: 0;
}Do
/* Use gap instead -- cleaner
and no :last-child hack */
.container {
display: flex;
gap: 16px;
}Don't
/* Using Flexbox for a 2D grid
of cards -- items won't align
across rows */
.grid {
display: flex;
flex-wrap: wrap;
}Do
/* Use CSS Grid for true
two-dimensional layouts */
.grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 16px;
}
See how real websites use Flexbox
Frontend Hero's CSS Scanner lets you click any element to see its flex properties, gap values, and alignment -- on any website.
Try CSS Scanner →Browser Support
Flexbox has full support in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. Global support is above 99%. You can use Flexbox in production without any vendor prefixes.
Related Tools
Frequently Asked Questions
Use Flexbox when you're laying out items along a single axis -- a row of buttons, a navbar, or a vertically stacked card. Use CSS Grid when you need to control both rows and columns at the same time, like a full page layout or a dashboard grid. In practice, most UIs combine both: Grid for the outer page structure and Flexbox for inner components.
justify-content distributes items along the main axis (horizontal in a row, vertical in a column). align-items positions items along the cross axis (the perpendicular direction). Think of justify-content as controlling left/right spacing in a row, and align-items as controlling up/down alignment in the same row.
flex-grow only works on direct children of a flex container. Make sure the parent has display: flex. Also, if you set a fixed width on the child, flex-grow may not appear to work because the fixed width overrides the growth. Try removing width and using flex-basis instead.
Set flex: 1 on each child element. This gives every child the same flex-grow value and a flex-basis of 0, so they all grow equally to fill the container. You can also use flex: 1 1 0% for the same effect.
Flexbox can wrap items into multiple lines with flex-wrap: wrap, which looks like a grid. However, items on each line are sized independently -- you don't get true column alignment across rows. For true two-dimensional control, use CSS Grid instead.
CSS Glossary
What is CSS Grid?
Two-dimensional layout system
What is Z-Index?
Stacking order and contexts
What is Box-Sizing?
Control element sizing model
What is CSS Specificity?
How browsers resolve conflicts
What is the CSS Cascade?
Rule priority and inheritance
What is Box Shadow?
Add depth with shadow effects
What is a CSS Reset?
Normalize browser defaults
What is Tailwind CSS?
Utility-first CSS framework
What is Responsive Design?
Adapt layouts to any screen