CSS Regions

Bring magazine layouts to the Web

• Collect content in flows
• Distribute content in regions
• Regions with different geometry/style
• Combine with flex box/multi-column/exclusions

Demo - a sample magazine-style layout

Collecting the content: Named flows

• Gather conceptually related content
• Identified by name

Code sample / -webkit-flow-into

Displaying the content: Regions

• Block container box that renders content from a named flow
• webkit-flow-from

Regions are scriptable via CSSOM

• NamedFlow interface
• webkitGetFlowByName