flow-into

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.

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



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



<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

CSS Regions Module Level 1: W3C Working Draft

flow-into

Summary

Overview table

Syntax

Values

Examples

Usage

Related specifications

See also

Related articles

Regions

External resources