CSS Regions Documentation

Contents

This document briefly describes the properties from the CSS Regions Specification.

Definitions and concepts

Named flow: a set of elements extracted from the normal content flow in order to be displayed in regions.

Region: an element that consumes content from a named flow.

Named flows and regions

-webkit-flow-into: name

Takes the content of the element out of the normal document flow and moves it into a named flow specified by an identifier.

The content will not be rendered unless explicitly consumed by a region with -webkit-flow-from: name on the region. 

<style type="text/css">
    #article{
        -webkit-flow-into: article-flow;
    }
</style>

<div id="article">
    This content will be associated with article-flow.
</div>

Multiple flows can be created using different flow names. One flow can consume content from the source of another flow. The content will be subtracted, not duplicated.

<style type="text/css">
    #article{
        -webkit-flow-into: article-flow;
    }

    blockquote{
        -webkit-flow-into: quotes-flow;
    }

</style>

<div id="article">
    This content will be associated with article-flow.

    <blockquote>
        But this will appear only in quotes-flow.
    </blockquote>
</div>
-webkit-flow-from: name

Inserts content from the name flow into the current element. The element's original content will be replaced by the one from the flow.

<style type="text/css">
    #article{
        -webkit-flow-into: article-flow;
    }
    #region{
        -webkit-flow-from: article-flow;
        width:100%;
    }
</style>

<div id="region"></div>
<div id="article">
    This content will be associated with article-flow
    and will replace the region's content, if any.
</div>

Multiple elements can consume content from the same flow.

<style type="text/css">
    #article{
        -webkit-flow-into: article-flow;
    }
    #region1,
    #region2{
        -webkit-flow-from: article-flow;
        width:20%;
        height:4em;
    }
</style>

<div id="region1"></div>
<div id="region2"></div>
<div id="article">
    This content will be associated with article-flow
    and will flow from #region1 to #region2.
</div>