flow-from

Jump to: navigation, search

flow-from


W3C Editor's 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

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

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 3 Editor's Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support
20 -webkit
Unsupported
8 -ms
Unsupported
534 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported


Compatibility notes

Browser Version Note
Internet Explorer 8 Supports only flow-into and flow-from properties in Compatibility Mode 5.
Internet Explorer 10 Supports only flow-into and flow-from properties in Compatibility Mode 9.

See also

Related articles

Regions




























  • flow-from






External resources