代码改变世界

CSS3页面布局方案

2015-02-28 22:45  龙恩0707  阅读(2318)  评论(0)  编辑  收藏  举报

CSS3页面布局方案

     Web页面中的布局，在css3之前，主要使用float属性或者position属性进行页面中的简单布局，但是使用它们也存在一些缺点，比如两栏或者多栏中如果元素的内容高度不一致，则有底部很难对齐的问题。因此在css3中追加了一些新的布局方式，使用这些新的布局方式，除了可以修改之前存在的问题之外，还可以进行更为便捷，更为复杂的页面布局。

     我们可以先来看看传统使用float或者position属性布局页面；如下HTML代码：

<div style="width:100%;overflow:hidden;" id="div-st">
    <h2 style="border-bottom:1px solid #333;">使用float属性或者position属性的布局缺点</h2>
    <div class="div1">    
        <p><span style="color:red;">示列文字1：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>
    </div>
    <div class="div2">
        <p><span style="color:red;">示列文字2：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>
    </div>
    <div class="div3">页面中其他内容</div>
</div>

CSS代码如下：

.div1,.div2,.div3 {float:left;width:26em;}
div.div1 {margin-right:2em;}
div.div3 {width:100%;background-color:yellow;height:260px;}

实现效果如下：

使用float属性或者position属性的布局缺点

示列文字1：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

示列文字2：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

页面中其他内容

如果在上面中的类名为div1下加一张图片的话，那么上面的demo演示变成如下面的了！

使用float属性或者position属性的布局缺点

示列文字1：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

示列文字2：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

页面中其他内容

     如上所示：使用float属性或position属性进行页面布局时有一个比较明显的缺点，就是第一个div元素与第二个div元素是各自独立的，因此如果在第一个div元素中加入一些内容的话，将会使得两个元素的底部不能对齐，导致页面中多处一块空白区域。

    使用多栏布局可以解决上面的问题。下面我们一步步来，如下：

    1.首先我们先定义个div盒子.

       HTML代码如下：

<div class="box">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

       CSS代码如下：

.box {width:600px;background-color:yellow;}

效果如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

    2.使用多栏布局的第一个属性：column-count,column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示。

HTML代码

<div class="box2">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box2 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;}

效果演示如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

     3.使用多栏布局的第二个属性：column-gap,使用column-gap属性来设定多栏之间的间隔距离。

      HTML代码如下：

<div class="box3">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box3 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;-moz-column-gap: 60px;-webkit-column-gap: 60px;}

效果演示如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

  4. 使用多栏布局的第三个属性：column-rule,column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度，样式，颜色，该属性的指定方法与css中的border属性指定方法相同。

HTML代码如下：

<div class="box4">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box4 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;-moz-column-gap: 60px;-webkit-column-gap: 60px;-webkit-column-rule: 5px dashed #000;-moz-column-rule: 5px dashed #000;}

效果演示如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

 下面我们综合来看下 "使用多栏布局方式" 的demo如下：

HTML代码如下：

<div style="width:100%;overflow:hidden;" id="div-nd">
    <h2 style="border-bottom:1px solid #333;">使用多栏布局方式</h2>
    <div class="div1-nd">
        <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/21/88B00EB1D65E0890DDB5E032BA892AC2_B500_900_110_110.jpeg"/>
        <p><span style="color:red;">示列文字1：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>
        <p><span style="color:red;">示列文字2：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>
    </div>
    <div class="div3-nd">页面中其他内容</div>
</div>

CSS代码如下：

div.div1-nd {/*width:52em;*/-moz-column-width:26em;-webkit-column-width:26em;-moz-column-count:2;-webkit-column-count:2;}
div.div3-nd {width:100%;background-color:yellow;height:260px;}

效果演示如下：

效果请点击demo

 使用多栏布局如上图，虽然解决了两块元素对齐的问题，但是我个人觉得2块区域并不是独立的，第一块内容到了第二块内容上来了。

使用float属性或position属性时的缺点---盒布局

  在css3中，除了上面的多栏布局之外，还可以使用盒布局解决前面所说的使用float属性或position属性时左右两栏或多栏中底部不能对齐的问题.

  1. 比如我们先来看下传统的demo，HTML代码如下：

<div class="container">
    <div class="left-sidebar">
        <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 class="contents">
        <h2>内容</h2>
        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>
    </div>
    <div class="right-sidebar">
        <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>

CSS代码如下：

.left-sidebar {float:left;width:200px;padding:26px;background-color:orange;}
.right-sidebar {float:left;width:200px;padding:26px;background-color:limegreen;}
.contents {float:left;width:240px;padding:26px;background-color:yellow;}
.container {width:100%;overflow:hidden;}

演示如下：

左侧边栏

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

右侧边栏

 2. 在css3中，通过box属性来使用盒布局。使用盒布局如下：

HTML代码如下：

<div class="container2">
    <div class="left-sidebar2">
        <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 class="contents2">
        <h2>内容</h2>
        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>
    </div>
    <div class="right-sidebar2">
        <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>

CSS代码如下：

.container2 {display:-moz-box;display:-webkit-box;}
.left-sidebar2 {width:200px;padding:26px;background-color:orange;}
.right-sidebar2 {width:200px;padding:26px;background-color:limegreen;}
.contents2 {width:280px;padding:26px;background-color:yellow;}

demo演示如下：

左侧边栏

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

右侧边栏

   盒布局与多栏布局的区别：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。

   3. 使用自适应窗口的弹性盒布局，假如我想左右两侧固定，中间自适应，可以使用box-flex属性.

   比如HTML代码如下：

<div class="container3">
    <div class="left-sidebar3">
        <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 class="contents3">
        <h2>内容</h2>
        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>
    </div>
    <div class="right-sidebar3">
        <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>

CSS代码如下：

.container3 {display:-moz-box;display:-webkit-box;}
.left-sidebar3 {width:200px;padding:26px;background-color:orange;}
.right-sidebar3 {width:200px;padding:26px;background-color:limegreen;}
.contents3 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;}

demo演示如下：

左侧边栏

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

右侧边栏

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

 比如如下HTML代码：

<div class="container4">
    <div class="left-sidebar4">
        <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 class="contents4">
        <h2>内容</h2>
        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>
    </div>
    <div class="right-sidebar4">
        <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>

CSS代码如下：

.container4 {display:-moz-box;display:-webkit-box;}
.left-sidebar4 {width:200px;padding:26px;background-color:orange;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}
.right-sidebar4 {width:200px;padding:26px;background-color:limegreen;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}
.contents4 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;}

demo演示如下：

左侧边栏

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

右侧边栏

 5.  改变元素的排列方向--使用弹性盒布局的时候，我们可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向，在css3中，使用box-orient来指定多个元素的排列方向

HTML代码如下：

<div class="container5">
    <div class="left-sidebar5">
        <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 class="contents5">
        <h2>内容</h2>
        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>
    </div>
    <div class="right-sidebar5">
        <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>

CSS代码如下：

.container5 {display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;-webkit-box-orient:vertical;}
.left-sidebar5 {padding:26px;background-color:orange;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}
.right-sidebar5 {padding:26px;background-color:limegreen;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}
.contents5 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;}

demo演示如下：

左侧边栏

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

右侧边栏

 指定水平方向与垂直方向的对齐方式

  使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字，图像及子元素水平方向或垂直方向的对齐方式。如下表

属性值排列方向box-pack属性值的含义box-align属性值的含义

start horizontal 左对齐，文字，图像或子元素被放置在元素最左边 顶部对齐，文字，图像或子元素被放置在元素最顶部
center horizontal 中对齐，文字，图像或子元素被放置在元素中部 中对齐，文字，图像或子元素被放置在元素中部
end horizontal 右对齐，文字，图像或子元素被放置在元素最右边 底部对齐，文字，图像或子元素被放置在元素最底部
start vertical 顶部对齐，文字，图像或子元素被放置在元素最顶部 左对齐，文字，图像或子元素被放置在元素最左边
center vertical 中对齐，文字，图像或子元素被放置在元素中部 中对齐，文字，图像或子元素被放置在元素中部
end vertical 底部对齐，文字，图像或子元素被放置在元素最底部 右对齐，文字，图像或子元素被放置在元素最右边

 1. 如下demo，在div元素下放置一个文字，让其水平垂直居中，如下：

HTML代码：

<div class="center1">我是来测试居中的</div>

CSS代码：

.center1 {width:200px;height:200px;background-color:pink;display:-moz-box;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;}

demo演示如下：

我是来测试居中的

 2. 下面是测试图片水平 垂直居中的如下demo。

     HTML代码如下： 

<div class="center2">
    <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/21/88B00EB1D65E0890DDB5E032BA892AC2_B500_900_110_110.jpeg"/>
</div>

     CSS代码如下：

.center2 {width:400px;height:400px;background-color:pink;display:-moz-box;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;border:5px solid red;}

demo演示如下：