全方位了解CSS3的Regions扩展

什么是CSS3的Regions扩展

CSS3的Regions扩展是指一种可以自动将文本和图片等内容适应不同尺寸、不同分区的CSS样式功能。通过进行分区标记，可以使文本、图像从一个'flow'源跨越多个框从而达到更好的排版效果。

如何使用CSS3的Regions扩展

使用CSS3的Regions扩展需要以下步骤：

1. 通过CSS属性 flow-from 将一个'flow'源流注入到一个CSS区域中；
2. 通过CSS属性 flow-into 把一个'flow'源流流入到一个CSS多区域容器中，在这个容器中，参与流动的文本块会自动被适应到正确的区域中。

示例1：实现一列文字自动分成两段排版

<div class="container">
    <div class="text-flow">
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
    </div>
    <div class="text-display">
    </div>
</div>

.text-flow {                             /* 文本流元素 */
    width:400px;
    height:100%;
    -webkit-flow-into: article;          /* 将文本流注入article这个区域 */
            flow-into: article;
}
.text-display {                          /* 文本显示的区域 */
    width:200px;
    height:300px;
    -webkit-flow-from: article;          /* 文本从article这个区间流出 */
            flow-from: article;
}

示例2：使用CSS的Regions扩展实现一个自适应图像库

<section class="container">
    <aside class="text-flow">
        <p>这是一个用于展示图片的图库，里面展示了一些美食图片。</p>
        <p>可以滑动下面的滑动条浏览更多图片，每次会自动加载15张图片。</p>
    </aside>
    <div class="gallery">
        <div class="gallery-body">
            <img src="http://lorempixel.com/120/80/food/1" alt="">
            <!-- more images here -->
        </div>
    </div>
</section>

.container {
    height: 400px;
}
.text-flow {
    font-size: 20px;
    line-height: 30px;
}
.gallery {
    height: calc(100% - 60px);
    display: block;
    background-color: lightgray;
    /*这里设置了regions的样式*/
    -webkit-flow-from: article;
    flow-from: article;
}
.gallery-body {
    column-width: 140px;
    column-gap: 10px;
}
.gallery-body img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

总结

需要注意的是，CSS3的Regions扩展目前的兼容性并不是很好，推荐在实际项目中慎用。