Reflow content with flexbox at narrow widths
Flexbox lets a row of items wrap into a column when the space runs out, which is what reflow asks for. W3C lists C31 as sufficient for 1.4.10 Reflow and states the target as two numbers rather than one. No horizontal scrollbar at a width equivalent to 320 CSS pixels, for content meant to scroll vertically. And no vertical scrollbar at a height equivalent to 256 CSS pixels, for content meant to scroll horizontally. The second half is the one every summary drops and it is the one that catches horizontally scrolling layouts. Two properties do most of the work. flex-wrap lets items move down, and a flex-basis in a relative unit tells them when. One caution goes with the power. Flexbox can reorder items visually, and the relationships and the reading order have to survive that, which is the subject of C27.
How we find it in an audit
We set the viewport to 320 CSS pixels, or zoom to 400 percent on a 1280 pixel screen, which comes to the same thing, then look for the horizontal scrollbar. Then we do the height check on anything built to scroll sideways. Automated tools can flag fixed widths and cannot tell whether the result reflows or merely shrinks.
How affected users experience it
At 400 percent zoom, a layout that does not reflow means dragging left and right for every line of every paragraph. Readers with low vision live at that zoom level, so this is not an edge case for them, it is the normal condition of using the web. When the content reflows into one column, the reading is ordinary again.
Passes vs. fails
Passes
.features { display: flex; flex-wrap: wrap; }
.feature { flex: 1 1 16em; min-width: 0; }Fails
.features { display: flex; }
.feature { width: 320px; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
Other ways to satisfy this rule
11 guides on this site are filed under 1.4.10 Reflow. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C32sufficientStack columns with grid and media queries
- C33sufficientBreak long URLs so nothing scrolls sideways
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
- G225sufficientKeep horizontal carousels usable at 320 pixels
This guide is our interpretation of W3C technique C31: Using CSS Flexbox to reflow content. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.