The reading-flow property controls the order in which elements are read by screen readers or navigated via sequential navigation (Tab) — not necessarily DOM order. Especially useful in grid/flex where visual order differs from DOM order..grid {
reading-flow: grid-rows;
}.dashboard {
display: grid;
grid-auto-flow: dense;
reading-flow: source-order;
}normalDOM order (default).source-orderCreates a reading flow container, allowing reading-order on children. Otherwise DOM order.flex-visualIn flex container: visual order (after flex-direction/row-reverse).flex-flowIn flex container: per flex-flow — row by row.grid-rowsIn grid container: row by row.grid-columnsIn grid container: column by column.grid-orderIn grid container: per items' order property.CSS Display Module Level 4Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
