The CSS Regions feature allows content to flow dynamically through a series of presentational block elements, known as regions, allowing for complex magazine-style layouts.
Two CSS properties make it work. The flow-into property diverts content into a named flow. The corresponding flow-from property threads that flow’s content through a dynamic series of region elements, collectively known as a region chain. The feature allows content to thread through a document’s regions, magazine-style. Regions can be positioned using various other CSS techniques, such as flexible boxes, fixed positioning, floats, or grids.
The following shows a complex layout featuring a series of regions, with a named flow’s content threading through regions 1 through 4, which form a chain. A separate named flow is assigned to the region labeled A:
Assigning flow-from to a block element turns it into a region. As long as it serves as a region, any of its nested content is obscured by content diverted from other elements whose flow-into property specifies the same named flow. If there is no corresponding flow-into content, the region displays empty content.
For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.
- CSS Regions Module Level 1
- W3C Working Draft