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

flow-from

Summary

Overview table

Syntax

Values

Examples

Usage

Related specifications

See also

Related articles

Regions

External resources