This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

flow-from

Summary

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

Syntax

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

Values

<ident>
Identifier that replaces content from specified named flow, flowing it from one region element to another.
none
This container is not a region. Keeps element as is, and does not transform it into a region and replace its content.

Examples

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">
  ...
</article>

<!-- LAYOUT -->

<section class="layout">
  <div>Region #1</div>
  <div>Region #2</div>
  <div>Region #3</div>
  <div>Region #4</div>
  <div>Region #5</div>
</section>

Usage

 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

CSS Regions Module Level 1
W3C Working Draft

See also

Related articles

Regions

External resources