flow-from

< css‎ | properties
Jump to: navigation, search

flow-from

This article is Ready to Use.


W3C Working Draft

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.


Compatibility

There is no data available for topic "css", feature "flow-from". If you think that there should be data available, consider opening an issue.


Examples

The following CSS...

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:

HTML

<!-- 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

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft

See also

Related articles

Regions



























  • flow-from





External resources