This document briefly describes the properties from the CSS Regions Specification.
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.
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>
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>