iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Flexbox arranges items along one main axis, with a perpendicular cross axis. Set display: flex or display: inline-flex on a container, and its direct children become flex items. The key to using it well is knowing which properties belong on the container, which belong on its items, and how the axes change when you switch direction.
This reference covers the 12 properties in the Flexbox module’s property table. It also includes gap, row-gap, and column-gap as useful related spacing properties; they belong to the broader CSS Box Alignment family, not that core Flexbox property list. See the W3C CSS Flexible Box Layout Module Level 1 specification and MDN’s Flexbox guide.
Start with the axes and the defaults
The main axis follows the flex direction; the cross axis runs perpendicular to it. These are not fixed synonyms for horizontal and vertical: writing direction and the chosen flex direction determine where each axis points. justify-content works along the main axis, while align-items, align-self, and—when there are multiple lines—align-content work across the cross axis.
Recommended Free Tools
A flex container’s initial direction is row, and it does not wrap. Items do not grow, can shrink, and use an automatic basis. They stretch across the cross axis by default. The core initial values include justify-content: flex-start, align-content: stretch, align-items: stretch, align-self: auto, and flex: 0 1 auto.
.toolbar {
display: flex;
}
.toolbar > * {
/* Direct children are flex items. */
}Container properties set direction, wrapping, and alignment behavior. Item properties set an item’s order, sizing, and individual cross-axis alignment.
Choose direction and wrapping
flex-direction: set the main axis
Initial value: row. The four values are row, row-reverse, column, and column-reverse. A row follows the inline direction (which is not necessarily left-to-right); a column follows the block direction. Reverse values alter visual flow and start/end placement, but do not change the DOM order.
flex-wrap: keep one line or make more
Initial value: nowrap. With nowrap, items remain on one flex line, so they may shrink or overflow instead of wrapping. Use wrap to create additional lines, or wrap-reverse to reverse how those lines stack along the cross axis.
flex-flow: combine direction and wrapping
This shorthand sets flex-direction and flex-wrap. You can supply either component; the omitted one takes its initial value.
.card-list {
display: flex;
flex-flow: row wrap;
}Control item size with flex properties
Flex sizing is a three-part decision: flex-basis establishes an item’s starting main size, flex-grow distributes positive free space, and flex-shrink helps resolve negative free space when items do not fit. Final sizes also depend on factors such as item content and minimum sizing.
flex-basis: choose the starting main size
Initial value: auto. A basis can be content or a width-like size, such as 12rem. With auto, the browser consults the item’s relevant main-size property and, where appropriate, its content sizing. It is not simply a synonym for width: in a column flex container, the main axis is vertical.
flex-grow: share extra space
Initial value: 0; values are non-negative numbers. A positive value lets an item take a proportional share of available positive free space. For example, if two eligible items have grow factors of 1 and 2, the second receives twice the first item’s share of that free space. This describes the share, not a guarantee that the final items will have a particular total size.
flex-shrink: handle space that is short
Initial value: 1; values are non-negative numbers. When items do not fit, shrink factors participate in distributing negative free space. The calculation accounts for item bases and minimum sizes, so a larger shrink factor does not guarantee a simple, unweighted pixel reduction.
Rank #3
flex: set grow, shrink, and basis together
The shorthand writes values in this order: flex-grow, flex-shrink, then flex-basis. These named forms make common behavior easier to read:
| Value | Equivalent longhands | What it does |
|---|---|---|
initial |
0 1 auto |
Does not grow; can shrink from an automatic basis. |
auto |
1 1 auto |
Can grow and shrink from an automatic basis. |
none |
0 0 auto |
Neither grows nor shrinks from an automatic basis. |
A common one-number form is flex: 1. It enables growth and uses a zero-like basis in the common shorthand interpretation; browsers may serialize the basis as a percentage. Do not assume that equal shorthand values always mean equal final widths: content, minimum sizes, and the rest of the sizing context affect the outcome.
Align items and distribute space
justify-content: distribute free space on the main axis
Initial value: flex-start. This property positions or distributes remaining main-axis space after item sizing. Common values include flex-start, flex-end, center, space-between, space-around, and space-evenly. Logical alignment forms are also available through modern CSS Box Alignment. If growing items have already consumed the available space, there may be nothing left for justify-content to distribute.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Value | Where remaining space goes |
|---|---|
flex-start |
Items sit at the main-start side. |
center |
Items are grouped around the center. |
flex-end |
Items sit at the main-end side. |
space-between |
Space is placed between items; the outer items sit at the ends. |
space-around |
Space surrounds each item, leaving half-sized spaces at the outer edges relative to the gaps between items. |
space-evenly |
Space is distributed evenly between items and at both outer edges. |
align-items: align items across the cross axis
Initial value: stretch. It sets the default cross-axis alignment for items in a flex line. Core values include stretch, flex-start, flex-end, center, and baseline. Modern Box Alignment defines additional logical and baseline alignment forms.
align-self: override alignment for one item
Initial value: auto, which defers to the container’s align-items. Set another item-alignment value to position that flex item differently across the cross axis.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .primary-action {
align-self: flex-start;
}align-content: distribute multiple lines
Initial value: stretch. This property distributes flex lines across the cross axis when the container has multiple lines and extra cross-axis space. It has no meaningful visible distribution effect for a single line. Core values include flex-start, flex-end, center, space-between, space-around, and stretch; broader Box Alignment support includes additional forms.
The distinction is simple: align-items aligns items within a line; align-content distributes the lines themselves.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsCenter something with Flexbox
For a single item centered in both dimensions, give the container a definite size and center on both axes:
Best Value
.centered {
display: flex;
justify-content: center;
align-items: center;
min-height: 12rem;
}justify-content centers along the main axis and align-items centers across it. If you change the direction, the axes change too, but these properties continue to apply to the main and cross axes respectively.
Order, spacing, and a working example
order: change visual placement
Initial value: 0. This integer places an item into an ordering group; items with the same value retain their relative order. It changes visual layout, not source order. Keep the DOM order meaningful for assistive technology and sequential navigation: reverse directions and order can make the visual sequence diverge from the reading or keyboard sequence.
gap, row-gap, and column-gap: set gutters
These related spacing properties create gutters between flex items or flex lines without attaching spacing to each item’s outer box. Use gap for a row-and-column pair of gutter values, or set row-gap and column-gap individually. They are useful with wrapping, when line-to-line spacing matters; unlike margins, they define the spaces between tracks/items rather than adding spacing to each item.
Free tools Windows power users keep installed
One-click scans. No signup required.
Build up the layout one change at a time
This example starts with the default row behavior, adds a gutter, then shows the difference between distributing remaining space and letting items grow:
.demo {
display: flex;
gap: 1rem;
min-height: 10rem;
}
.demo > div {
padding: 1rem;
border: 1px solid #777;
}
.demo.spread {
justify-content: space-between;
}
.demo.grow > div {
flex: 1;
}
.demo.wrap {
flex-flow: row wrap;
align-content: space-between;
}
.demo .featured {
align-self: flex-start;
}Use .spread when items should leave their remaining space between them. In .grow, the items expand to consume free space, so justify-content may have little or none to distribute. In .wrap, align-content can distribute multiple lines only when wrapping actually creates them and the container has cross-axis room.
Why flex items may not wrap
Wrapping is controlled by the container, not by an item’s flex value. Check these points:
- Confirm that the flex container has
flex-wrap: wraporflex-flow: row wrap; the initial setting isnowrap. - Check that the children you expect to wrap are direct children of the flex container. A nested element is laid out by its own parent.
- Remember that items with
nowrapcan shrink or overflow instead of moving to a new line. - Inspect item bases, minimum sizes, and content: they affect sizing and whether items can fit on a line.
- If you use
flex: 1, the items may grow to fill their line, but that does not turn wrapping on.
For related explanations and the full conceptual guide, see MDN’s basic concepts of Flexbox.
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.
