Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


Represents content to flow among various block region elements. The NamedFlow interface allows access to both the content of the flow and the series of regions in which it displays, and helps determine if the content exceeds or falls short of the number of regions necessary to display it.


API Name Summary
overset Indicates whether a flow's content exceeds available space within a region chain, or if no available chain in which to flow content exists.


API Name Summary
getRegions Returns the static sequence of regions into which content flows.
getRegionsByContent Returns the static sequence of regions that contain at least part of the supplied target content element.


No events.


Generic event handler dispatches functions to add or delete regions based on changes to how content flows through a region chain:


    'regionoversetchange', modifyFlow
    'regionoversetchange', modifyFlow

function modifyFlow(e) {
    var flow =;
    // does content exceed available regions?
    if (flow.overset) {
      	appendRegion(; // custom function
    // ...or does insufficient content leave some regions empty?
    else if (flow.firstEmptyRegionIndex !== -1)	{
        trimRegions(; // custom function

Check if the opening paragraph splits across layout elements:


// get flow
var flow = document.getNamedFlows().namedItem('main');

// get all top-level flow-into elements that contribute to flow:
var elements = flow.getContent();

// get first element's first paragraph...
var firstPara = elements[0].querySelector('p:first-of-type');

// ...and the regions in which it appears:
var regions = flow.getRegionsByContent(firstPara);

// If the element splits across two regions, do	something to modify
// the layout or the content:
if (regions.length > 1) {
    adjustLayout(regions[0], firstPara); // custom function


 Specifying an identifier for any element's flow-into CSS property diverts its content to a NamedFlow object, whose name corresponds to the property's value.  Other elements that specify the same identifier as their flow-from property serve as a chain of 'regions' that dynamically display the content.  (The NamedFlow object is still available with NULL content if those properties are later removed.)

Use the getNamedFlows() method to gather named flows from a document.

For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.

Related specifications

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft

See also

Related articles


  • NamedFlow

External resources