css3 - 弹性盒布局 - 2.改变元素的显示顺序

在线演示

改变元素的显示顺序

使用弹性盒布局时，可以通过box-ordinal-group属性来改变各元素的显示顺序。可以在每个元素 样式中添加box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器显示的时候根据该序号从小到大来依次排列显示这些元素。

兼容：在Firefox中使用“-moz-box-ordinal-group”的形式；在Safari、Chrome中使用“-webkit-box-ordinal-group”的形式；

使用方法：在left、center、right的div元素都加入一个box-ordinal-group属性，并指定显示时的序号。

html：

<div id="container">
    <div id="left">
      <h2>左侧边栏</h2>
      <ul>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
      </ul>
    </div>
    <div id="center">
      <h2>内容</h2>
      <p>我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容我是自适应内容</p>
    </div>
    <div id="right">
      <h2>右侧边栏</h2>
      <ul>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
      </ul>
    </div>
 </div>

css：

<style>
    * {margin: 0;padding: 0;}/*去除默认样式，实战中不建议这么写*/

    #container {  /*把盒布局变成弹性盒布局*/
      display: -moz-box; /* 兼容Firefox */
      display: -webkit-box; /* 兼容Chrome、Safari */
    }
    #left {
      width: 200px;/*左边div宽度固定*/
      padding: 20px;
      background-color: orange;
    }
    #center {
      -moz-box-flex: 1; /*中间div宽度自适应屏幕 兼容Firefox*/
      -webkit-box-flex: 1;/*中间div宽度自适应屏幕 兼容Chrome、Safari*/

      padding: 20px;
      background-color: yellow;
    }
    #right {
      width: 200px; /*右边div宽度固定*/
      padding: 20px;
      background-color: limegreen;
    }
    #left,#center,#right {
      box-sizing:border-box; /* 兼容IE、Opera 以及 Chrome */
      -moz-box-sizing: border-box; /* 兼容Firefox */
      -webkit-box-sizing: border-box;
    }
</style>

解析：border-box：规定并排的盒子带边框的框；
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

border-box是为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。