flow-into

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

flow-into

W3C Editor's 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	Any element. The flow-into property does not apply to any pseudo-element such as first-line, first-letter, before or after.
Inherited	No
Media	visual
Computed value	as specified
Animatable	No
CSS Object Model Property	flowInto

Syntax

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

Values

<ident>

Identifier that specifies a named flow into which to place element's content.

none

The element's content remains unchanged, and is not diverted to a flow unless an ancestor element specifies it.

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

<article class="content">
  ...
</article>


<section class="layout">
  
Region #1
  
Region #2
  
Region #3
  
Region #4
  
Region #5
</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 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

• CSS Regions API

• CSSRegionStyleRule

• NamedFlow

• firstEmptyRegionIndex

• getContent

• getRegions

• getRegionsByContent

• name

• overset

• regionlayoutupdate

• Region

• getComputedRegionStyle

• getRegionFlowRanges

• regionOverset

• @region

• break-after

• break-before

• break-inside

• flow-from

• flow-into

• region-fragment

• getNamedFlows()

• Using CSS Regions to flow content through a layout

External resources

• W3C editor's draft: CSS Regions Module Level 3
• Adobe Web Standards: CSS Regions
• Adobe Developer's Network: CSS3 Regions: Rich page layout with HTML and CSS3
• Sample pages
• Additional examples on codpen.io. This experimental feature is in WebKit (Chrome and Safari) and Trident (Internet Explorer). Enable experimental features to see how CSS Regions works.