flow-from

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

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

No compatibility data found for feature "flow-from"


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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support Unsupported
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
537 -webkit


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