CSS Reference
flex
The one-dimensional layout system. Arranges items in a row or column with total control over spacing and alignment.
Last updated: October 2026
Definition: Flexbox is a one-dimensional layout model. Set display: flex on a parent, and its direct children become flex items. You can then control direction, alignment, distribution, wrapping, and sizing along a single axis. It replaced float-based layouts and table layouts entirely.
🎬 Live Examples
Four common Flexbox patterns — each one is pure CSS, no JavaScript.
💡 Every layout above uses only display: flex + one or two alignment properties.
Basic Syntax
/* Parent becomes a flex container */
.container {
display: flex;
}
/* All direct children become flex items */The parent controls layout. Children are positioned automatically.
🎯 Container Properties (Parent)
| Property | Common Values | Purpose |
|---|---|---|
display | flex / inline-flex | Enable Flexbox. |
flex-direction | row / column / row-reverse / column-reverse | Set the main axis direction. |
justify-content | flex-start / center / flex-end / space-between / space-around / space-evenly | Align along the main axis. |
align-items | stretch / flex-start / center / flex-end / baseline | Align along the cross axis. |
flex-wrap | nowrap / wrap / wrap-reverse | Allow items to wrap to a new line. |
gap | any length | Space between flex items. |
align-content | flex-start / center / space-between etc. | Align wrapped rows (only when flex-wrap: wrap). |
🎯 Item Properties (Children)
| Property | Purpose |
|---|---|
flex-grow | How much the item grows when there's extra space. |
flex-shrink | How much the item shrinks when there isn't enough space. |
flex-basis | The item's default size before growing or shrinking. |
flex | Shorthand for grow, shrink, and basis. flex: 1 is common. |
align-self | Override align-items for a single item. |
order | Change the visual order of items. |
The Navbar Pattern
The most common Flexbox layout — logo on the left, menu on the right.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.nav-menu {
display: flex;
gap: 1.5rem;
list-style: none;
}Equal-Width Columns with flex: 1
.row {
display: flex;
gap: 1rem;
}
.col {
flex: 1; /* All columns grow equally */
}Every column takes equal width. Change one to flex: 2 and it takes twice as much space.
Perfect Centering (The Classic)
.parent {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Two properties. Vertical and horizontal centering. Works for any child content — text, card, modal, form.
Responsive Stacking
.cards {
display: flex;
flex-direction: column; /* Mobile: stack */
gap: 1rem;
}
@media (min-width: 768px) {
.cards {
flex-direction: row; /* Desktop: side-by-side */
}
}Wrapping Flex Items
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}By default, flex items squeeze into one line. flex-wrap: wrap lets them flow onto multiple rows — perfect for tags, chips, and card grids.
🎯 Flex vs Grid — Decision Guide
| Scenario | Use |
|---|---|
| Navbar layout | Flex |
| Card component (image + text) | Flex |
| Button with icon + text | Flex |
| Centering content | Flex |
| Page layout (header, sidebar, main) | Grid |
| Card grid with equal rows/columns | Grid |
| Photo gallery (aligned rows) | Grid |
💡 Rule of thumb: If the layout is 1-dimensional (row OR column), use Flex. If it's 2-dimensional (rows AND columns), use Grid. Both are often combined in the same page.
⚠️ Common Mistakes
- Forgetting
display: flexon the parent. The alignment properties (justify-content,align-items) only work on a flex container. - Confusing
justify-contentandalign-items. Justify = main axis. Align = cross axis. Direction changes what each means. - Setting
margin: autoon a child. Flex items ignore auto margins for the main axis unless you use specific values likemargin-left: auto. - Using
flex: 1withoutmin-width: 0. Flex items can overflow if their content is wider than the available space. Addmin-width: 0to fix. - Trying to make a 2D layout with Flex. If you need rows and columns aligned, use Grid.
- Using
flex: 1and expecting specific widths.flex: 1distributes remaining space. Usewidthorflex-basisfor fixed sizes. - Not testing on mobile. Flex layouts can overflow or wrap unexpectedly on small screens. Always test.
♿ Accessibility Notes
- Visual order ≠ DOM order. Using
flex-direction: row-reverseororderchanges visual order but keeps the DOM order for screen readers. This can confuse keyboard users. - Test with keyboard tab order. If visual order doesn't match tab order, users get lost.
- Flex doesn't fix HTML structure. If the HTML is out of order, use Flex to style but consider fixing the DOM.
- Use semantic HTML inside flex containers. A
<nav>withdisplay: flexis still a nav landmark. - Test with a screen reader. Some flex patterns break screen reader navigation if DOM order differs from visual order.
❓ Frequently Asked Questions
What is CSS Flexbox?
Flexbox is a one-dimensional layout system for arranging items in a row or column. Set display: flex on a parent container, and its direct children become flex items that can be aligned, distributed, and resized along a single axis.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (horizontal by default). align-items aligns items along the cross axis (vertical by default). For a flex-row container, justify controls horizontal, align controls vertical.
What is the difference between flex and grid?
Flex is one-dimensional — arranges items in a single row OR column. Grid is two-dimensional — arranges items in rows AND columns simultaneously. Use Flex for components, Grid for page layouts.
How do I center a div with Flexbox?
Set display: flex, justify-content: center, and align-items: center on the parent. This centers the child both horizontally and vertically.
What does flex: 1 do?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It makes the item grow to fill available space equally with other flex: 1 items. This is the pattern for equal-width columns.