CSS Regions

Scenario 2: How to use CSS Regions with CSS Flexbox

Back to scenarios menu

Description

This code sample demonstrates how to flow data into a Flexbox using CSS Regions.

Code

// CSS
.content-source {
    -ms-flow-into: content;
}

.s2-flex-box {
     display: -ms-flexbox;
}

.s2-region {
     -ms-flow-from: content;

    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
}

// HTML
<iframe class="content-source" src="content.html"></iframe>
<div class="s2-flex-box">
    <div class="s2-region"></div>
    <div class="s2-region"></div>
    <div class="s2-region"></div>
</div>

Result