flow-into

< css‎ | properties
Jump to: navigation, search

flow-into

This article is Ready to Use.


W3C Working Draft

Summary

Diverts the selected element's content into a named flow, used to thread content through different layout regions specified by flow-from.

Overview table

Initial value none
Applies to Block elements, excluding pseudo-elements such as ::before or ::after.
Inherited No
Media visual
Computed value as specified
Animatable No
CSS Object Model Property flowInto
Percentages N/A

Syntax

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


Values

none
The element's content remains unchanged, and is not diverted to a flow unless an ancestor element specifies it.
<ident>
String identifier that specifies a named flow into which to divert the element's content. Common keyword values such as none, inherit, default, auto, and initial are invalid flow names, as are element and content:
  • <ident> element: The element keyword explicitly specifies the entire element diverts to the named flow, not just its contents. (This is the default behavior without the keyword.)
  • <ident> content: Adding the content keyword overrides the default behavior described above, diverting only the element's nested content to the named flow.


Compatibility

There is no data available for topic "css", feature "flow-into". 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">
  <p>Content #1</p>
  <p>Content #2</p>
  ...
  <p>Content #n</p>
</article>
 
<!-- LAYOUT -->
 
<section class="layout">
  <div>Region #1</div>
  <div>Region #2</div>
  <div>Region #3</div>
  <div>Region #4</div>
</section>

By default, or with the element keyword, content appears as if structured as follows, but dynamically fragmenting from one layout region to another. (Note that as presented, this is not a valid DOM structure, and simply helps to visualize how content appears in output.)

HTML

<section class="layout">
  <div>
      	    <article class="content">
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
  </div>
  <div>
              ...
  </div>
  <div>
              <p>Content #n</p>
      	     </article>
  </div>
</section>

With the content keyword specified, content fragments appear as if structured as follows, without the interim article element that serves as their container:

HTML

<section class="layout">
  <div>
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
  </div>
  <div>
              ...
  </div>
  <div>
      	     <p>Content #n</p>
  </div>
</section>

Usage

The flow-into property diverts content from where it would ordinarily appear in the document to a named flow. It reappears elsewhere flowing through a series of region elements whose flow-from specifies the same named flow.

An element whose flow-into specifies a named flow takes its descendents along with it by default, with two exceptions:

  • If a descendent specifies a different named flow, it can be presented in a different series of regions specified by a corresponding flow-from.
  • If a descendent specifies the same named flow, it is moved from within the content and then appended.

Setting a descendent's flow-into to none has no effect, and cannot be used to prevent the descendent from flowing along with the ancestor.

More than one element can contribute to the same named flow, in which case their DOM order determines how they appear output within regions.

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




External resources