Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Flexbox is CSS for arranging and sizing elements along one axis at a time. Set display: flex on a parent, then control its direct children with direction, flexible sizing, alignment, and optional wrapping. The key to predictable results is to reason in terms of the main axis and cross axis, not simply “horizontal” and “vertical.”
Start with a flex container and flex items
Any element with display: flex becomes a flex container. Its direct children become flex items; grandchildren are not flex items unless their own parent is also a flex container.
.toolbar {
display: flex;
}
.toolbar > button {
/* These are flex items */
}By default, the items are laid out in a row. Flexbox is defined as a box model optimized for user-interface design and for laying out items in one dimension, as MDN’s Flexbox guide explains.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Understand the main and cross axes
flex-direction establishes the main axis. The cross axis is perpendicular to it.
row(the initial value) lays items along the inline direction, commonly left to right in a left-to-right writing mode.row-reversereverses that flow.columnlays items along the block direction, commonly from top to bottom.column-reversereverses the column flow.
Because writing modes and direction settings can change physical screen directions, “main” and “cross” are more reliable than assuming the main axis is always horizontal. Change the direction and the meaning of several alignment properties changes with it.
.card-list {
display: flex;
flex-direction: column;
}Align items on each axis
justify-content: distribute space on the main axis
Use justify-content to position or distribute flex items along the main axis. Common values include flex-start, center, flex-end, space-between, space-around, and space-evenly.
.nav {
display: flex;
justify-content: space-between;
}align-items: align items on the cross axis
align-items controls the cross-axis alignment of items on a flex line. The default is stretch when the items’ cross-axis size is automatic. Other useful values include flex-start, center, flex-end, and baseline.
.toolbar {
display: flex;
align-items: center;
}Always identify the current flex-direction before choosing between these properties. If you switch from row to column, the axes switch roles, so an alignment that previously affected left-to-right placement may now affect top-to-bottom placement.
Control size with basis, grow, and shrink
Flex items resolve their size along the main axis through three related controls:
flex-basissupplies an item’s starting main-axis size before remaining space is distributed. A length such as12remor a percentage can be used;autouses the item’s main-size property or its content size.flex-growdetermines how an item receives positive free space after the basis sizes are accounted for. Grow factors are proportional: an item with a factor of2receives twice the share of an item with a factor of1, subject to constraints.flex-shrinkdetermines how items give up space when their bases do not fit. Shrinking is weighted by the items’ base sizes, and minimum-size constraints can prevent an item from becoming as small as the calculation suggests.
The flex shorthand combines these values:
.sidebar {
flex: 0 0 16rem; /* do not grow or shrink; start at 16rem */
}
.content {
flex: 1; /* take available space relative to other flexible items */
}Do not treat flex: 1 as a magic “equal width” switch. It sets a grow factor and permits shrinking while using a zero-like flex basis, so the final sizes still depend on siblings, available space, and minimum-content constraints. For explicit behavior, write the three values yourself, such as flex: 1 1 20rem.
Rank #3
Manage a single line or allow wrapping
Flex containers use flex-wrap: nowrap by default. In a no-wrap container, items stay on one line and may shrink to fit.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →.actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}With flex-wrap: wrap, items create additional flex lines when the available main-axis space is insufficient. Each line distributes its own free space independently. A second line does not share column widths with the first, so wrapped items do not automatically form a coordinated grid.
align-content can distribute extra cross-axis space between multiple flex lines, but it does not make the lines share item tracks. If cross-line column alignment matters, use CSS Grid instead.
Use gaps and per-item overrides
The gap, row-gap, and column-gap properties add consistent spacing without margins that complicate the edges of a group.
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}align-self overrides align-items for one item, while an item’s order changes its visual order. Use visual reordering carefully: keyboard navigation and screen-reader reading order generally follow the document source, not an arbitrary visual order.
Free tools Windows power users keep installed
One-click scans. No signup required.
Flexbox versus Grid: choose by the problem’s dimensions
| Question | Flexbox | Grid |
|---|---|---|
| How many dimensions are coordinated? | One axis at a time: a row or a column. | Rows and columns are coordinated together. |
| How does content flow? | Items flow naturally and can wrap into independent lines. | Items occupy explicit or automatically generated row and column tracks. |
| When is it a strong fit? | Toolbars, navigation, button groups, media objects, and other linear UI relationships. | Page sections, card layouts, and any design requiring aligned columns across multiple rows. |
| What happens across wrapped rows? | Each line resolves its own item sizes; columns are not shared. | Tracks can keep columns aligned across rows. |
Choose Flexbox when the relationship is primarily linear and the content should flow with available space. Choose Grid when the layout needs simultaneous row-and-column control. Neither is universally better; a page can use Grid for its major regions and Flexbox inside individual components.
Best Value
Troubleshoot common Flexbox surprises
Everything stays on one line
That is the default. Add flex-wrap: wrap if items should move to additional lines, and check whether the container has enough width for the intended basis sizes.
Items become unexpectedly narrow
They may be shrinking to resolve insufficient main-axis space. Inspect flex-basis, flex-shrink, and the item’s minimum size. Long words, unbreakable strings, images, and intrinsic content can impose minimum-content constraints. A deliberate rule such as flex: 0 1 18rem expresses a preferred starting size while permitting controlled shrinkage; min-width: 0 is often needed on a flex item whose contents must be allowed to shrink and wrap.
Alignment seems to affect the wrong direction
Recheck flex-direction. justify-content follows the main axis and align-items follows the cross axis; changing the direction changes which physical direction each property controls.
Wrapped rows do not line up like columns
This is expected Flexbox behavior: lines distribute space independently. Replace the container with Grid when shared column tracks or cross-row alignment is a core requirement.
Compatibility and specifications
MDN marks the flex shorthand as widely available across browsers since September 2015, while noting that not every part of the latest syntax is implemented everywhere. Check the MDN compatibility table for each modern property or value against your project’s browser targets. The underlying CSS Flexible Box Layout Module Level 1 is a W3C Recommendation dated November 19, 2018.
For production layouts, test the actual combinations you use: direction, wrapping, intrinsic content, minimum sizes, and the browser versions your audience supports.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
