Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


Fires on the NamedFlow object when there is a change in how content flows through a region chain.

Overview Table

Synchronous No
Bubbles No
Target NamedFlow
Cancelable Yes
Default action none

Fires on the NamedFlow object when there is 'any' change in how content flows through a region chain, even minor changes that don't affect the total number of regions the content requires.


This simple example logs each time content reflows among regions, and works with the CSS and JavaScript that follow. Define layout and content elements:


<section class="page">
    <div> <h1>Region #1</h1> </div>
    <div> <h1>Region #2</h1> </div>
<h1>Sample CSS Regions Layout</h1>
<p>Riverrun, past Eve and Adam's, from swerve of shore to bend of bay, brings us by a commodius vicus of recirculation back to Howth Castle and Environs.</p>

View live example

Flow the content into the layout:


body { background: #aaa; }
article { flow-into: main; }

div {
    flow-from: main;
    region-fragment: break;
    top: 5%;
    width: 40%;
    height: 75%;

div, aside {
    position: absolute;
    background: #fff;    
    padding: 1em;
    border-radius: 1em;

aside {
    min-width: 40%;
    left: 5%;
    top: 90%;

div:first-of-type { left: 5%; }
div:last-of-type { left: 55%; }

View live example

Log to console any shifts of content from one region to another that result when resizing the window, and thus the layout elements.


    function() { console.log(inc++); }

View live example


The event fires when content shifts 'in any way' within the region chain, such as when linebreaks change. That is, when any region's collection of DOM Range fragments changes their dimensions or offsets. (Compare with the regionoversetchange event, which fires much less frequently in response to changing content or dimensions.)

Related specifications

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

See also

Related articles


External resources