标记下,CSS3中弹性盒布局的最新版

摘要在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。

虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理。

虽然CSS Flexible Box模块已经被公布了好几年,但是自开始公布以来,该模块中所定义的内容已经经过了几次重大修改。目前公布的正式版本为◦CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 September 2012

目前为止,Opera 12.10版本以上,IE 11版本以上、Chrome 21版以上、Firefox 22版本以上的浏览器均支持该最新版本。

 从示例页面开始学习最新版本的弹性盒布局

接下来开始通过一个示例页面开始学习最新版本的弹性盒布局。该示例页面中的body元素中的代码如下所示。

<body>
<div id="main">
    <div class="content">
        <section>
            <h1>section 1</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1>section 2</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1>section 3</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1>section 4</h1>
            <p>示例文字</p>
        </section>
    </div>
    <div class="content">
        <section>
            <h1>section 5</h1>
            <p>示例文字</p>
            <section>
                <h1>section 6</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 7</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 8</h1>
                <p>示例文字</p>
            </section>
    </div>
    <div class="content">
        <section>
            <h1>section 9</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1>section 10</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1>section 11</h1>
            <p>示例文字</p>
        </section>
        <section>
            <h1>section 12</h1>
            <p>示例文字</p>
        </section>
    </div>
</div>
</body>

接下来,首先对该页面中各div元素及section元素指定边框样式,代码如下所示。

<style>
#main {
    border: 1px dotted #f0f;
    padding: 1em;
}
.content {
    border: 1px dotted #0ff;
    padding: 1em;
}
section {
    border: 1px dotted #f00;
    padding: 1em;
}
</style>

CSS3弹性盒布局

在浏览器中打开目前为止的示例页面,页面中各元素从上往下纵向排列,如上图所示。

  • 标记下,CSS3中弹性盒布局的最新版已关闭评论
  •  阅读 1,934
  • 隐藏边栏
    A+
发布日期:2015-06-12 17:52:17 分类:HTML5+CSS3

评论已关闭!