< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


Flows content from a named flow (specified by a corresponding flow-into) through selected elements to form a dynamic chain of layout regions.

Overview table

Initial value none
Applies to Non-replaced block containers. (May expand in the future to include other containers.)
Inherited No
Media visual
Computed value as specified
Animatable No
CSS Object Model Property flowFrom
Percentages N/A


  • flow-from: <ident>
  • flow-from: none


Identifier that replaces content from specified named flow, flowing it from one region element to another.

This container is not a region. Keeps element as is, and does not transform it into a region and replace its content.


The following CSS...


article.content {
    flow-into: main;

section.layout > div {
    flow-from: main;

...flows the article through the series of div elements, transforming them into regions and replacing the placeholder text:


<!-- CONTENT -->
<article class="content">
<!-- LAYOUT -->
<section class="layout">
  <div>Region #1</div>
  <div>Region #2</div>
  <div>Region #3</div>
  <div>Region #4</div>
  <div>Region #5</div>


 While regions can be positioned arbitrarily on the screen, their order in the document determines the order in which content flows. Regions otherwise do not have to appear as a continuous series within the DOM.

Descendants of any element whose flow-from specifies a named flow are suppressed from display, making their own flow-from values irrelevant.

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


  • flow-from

External resources