Flexbox is the CSS Flexible Box Layout Module, a one-dimensional layout model that arranges child items along a row or a column and shares out the free space between them. You turn it on with display: flex on the parent. It is specified in CSS Flexible Box Layout Module Level 1, published by the W3C as a Candidate Recommendation Draft dated 14 October 2025.
How it works
The element with display: flex is the flex container, and its direct children are flex items. Items follow the main axis, set by flex-direction, and the cross axis runs perpendicular to it. Each in-flow child of the container becomes a flex item. Deeper descendants do not.
Initial values from the spec:
- flex-direction: row (other values: row-reverse, column, column-reverse)
- flex-wrap: nowrap (other values: wrap, wrap-reverse)
- flex: 0 1 auto, which is flex-grow 0, flex-shrink 1 and flex-basis auto
- justify-content: places items along the main axis. The spec lists flex-start as the initial value
- align-items: places items along the cross axis. The initial value is normal, which behaves as stretch for flex items, so in Chromium 141 an item with no height stretched to the container's 100px height
Free space is divided by flex-grow factors. With flex: 1 and flex: 2 on two items, the second gets twice the share of the leftover space of the first.
<style>
.row { display: flex; width: 400px; gap: 10px; }
.row div { height: 20px; }
.a { flex: 1 } .b { flex: 2 } .c { width: 60px }
</style>
<div class="row"><div class="a"></div><div class="b"></div><div class="c"></div></div>
Measured in headless Chromium 141:
a 106.671875
b 213.328125
c 60
The container is 400px wide. The 60px item and two 10px gaps use 80px, leaving 320px, which is split 1:2 between a and b.
What is the difference between justify-content and align-items?
Justify-content aligns items along the main axis, and align-items aligns them along the cross axis. In the default row direction that means horizontal and vertical. If you change flex-direction to column, the two swap. To center something both ways, set display: flex, justify-content: center and align-items: center on the container.
Common pitfalls
- Putting display: flex on the wrong element: the properties act on the children of the flex container. Put justify-content and align-items on the parent, and flex, flex-grow or align-self on the child.
- Items overflowing instead of wrapping: the initial flex-wrap is nowrap, so items stay on one line. They shrink where they can, because flex-shrink is 1, and overflow once they cannot shrink further. Set flex-wrap: wrap if you want a second line.
- Long content refusing to shrink: flex items have an automatic minimum size, so a flex: 1 item holding a 60-character unbroken string measured 426.1px inside a 200px container in Chromium 141. Add min-width: 0 to the item, and it shrank to 100px next to an equal sibling.
- Reading computed alignment values: Chromium 141 reports both justify-content and align-items as normal on a new flex container, not flex-start and stretch. In a flex container, normal behaves like those values, so only code that compares the strings is affected.
- Using flexbox for a two-dimensional grid: items in separate rows do not line up in columns. Use CSS Grid when you need both.
Related terms
- CSS Grid — the two-dimensional layout model, used when rows and columns both matter
- DOM — the tree of elements whose direct children become flex items
See also