View 01 · Finding
One subject, two views.
This first viewport introduces an illustrative regional comparison. The second explains how flexbox creates the composition.
03sample zones
24point gap
01comparison
Illustrative sample content
Households within easy reach of services
What to notice
The primary comparison receives the wider region
The 30/70 row gives orientation enough room to work while reserving visual emphasis for the sample chart.
What not to infer
Layout hierarchy is not evidence
Color and placement organize the example; source notes, uncertainty, and definitions would still be required for real data.
View 02 · Method
Viewport sections built with flexbox
Each page is a flex container with a minimum height of one viewport. Nested flex rows then distribute available width between the narrative, visualization, and supporting notes. On smaller screens, those rows change direction and return to normal document flow.
01 · BASIS
Flex ratios establish relative widths without hard-coded pixels.
02 · WRAP
Related content forms its own row and remains easy to reorder.
03 · FLOW
Mobile rules stack every region in semantic source order.
.page {
min-height: 100svh;
display: flex;
}
.briefing-panel { flex: 3 1 0; }
.visual-panel { flex: 7 1 0; }