CSS3布局体验：灵活的盒子模型

CSS 3为开发人员带来了很多期待已久的炫目功能，同时在CSS 2的基础中，它也增加了一些新的盒子模型参数。通过学习和测试，可以发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，所有例子都基于以下HTML代码：

成都创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为来宾企业提供专业的做网站、成都网站设计，来宾网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

相关文章推荐：定义未来Web样式 CSS 3最新特性一览 CSS 3备受期待的8大功能

容器的排列

在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用CSS 3提供的功能后，我们可以在不改变HTML结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。在需用使用灵活盒子模型(FlexibleBoxModule)的时候，我们需要先把其父容器的Display属性设置为box或者inline-box。

水平分布和垂直分布

我们可以通过box-orient属性指定容器的分布轴，当这个属性的值为vertical时其子容器将垂直分布（也可以为block-axis），当值为horizontal时其子容器讲水平分布（也可以为inline-axis）。在本文的第一个例子里我们使用以下的CSS：

 
 
 
  
  
  #exemple1.content{ 
  
  
   -moz-box-orient:horizontal; 
  
  
   -webkit-box-orient:horizontal; 
  
  
   box-orient:horizontal; 
  
  
  } 
  
  
  
  
  
  #exemple1.boite{ 
  
  
   -moz-box-flex:1; 
  
  
   -webkit-box-flex:1; 
  
  
   box-flex:1; 
  
  
  }

具体的效果可以看这个DEMO，三个子Div容器都横向并列了。

注：这个效果在CSS 2里理论上也可以通过Display:inline;实现，但由于某些浏览器的BUG，没人会这样做。

反序排列

box-direction属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block级元素是按照加载顺序从上到下排列，inline级元素是从左到右排列的，但现在通过box-direction属性我们可以让最后加载的block级元素显示在最顶部，最后加载的inline级元素显示在左边。

但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。在第二个例子里，我们使用以下的CSS：

 
 
 
  
  
  #exemple2.content{ 
  
  
   -moz-box-orient:vertical; 
  
  
   -moz-box-direction:reverse; 
  
  
  
  
  
   -webkit-box-orient:vertical; 
  
  
   -webkit-box-direction:reverse; 
  
  
  
  
  
   box-orient:vertical; 
  
  
   box-direction:reverse; 
  
  
  } 
  
  
  
  
  
  #exemple2.boite{ 
  
  
   -moz-box-flex:1; 
  
  
   -webkit-box-flex:1; 
  
  
   box-flex:1; 
  
  
  }

效果大家可以看这个DEMO。可以发现，在不改变HTML结构的情况下，容器的排列顺序改变了。

按指定顺序排列

我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group属性可以帮我们做到这一点。通过box-ordinal-group为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为1，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的CSS：

 
 
 
  
  
  #exemple3.content{ 
  
  
   -moz-box-orient:vertical; 
  
  
   -moz-box-direction:reverse; 
  
  
  
  
  
   -webkit-box-orient:vertical; 
  
  
   -webkit-box-direction:reverse; 
  
  
  
  
  
   box-orient:vertical; 
  
  
   box-direction:reverse; 
  
  
  } 
  
  
  
  
  
  #exemple3.boite{ 
  
  
   -moz-box-flex:1; 
  
  
   -webkit-box-flex:1; 
  
  
   box-flex:1; 
  
  
  } 
  
  
  
  
  
  #exemple3.v1{ 
  
  
   -moz-box-ordinal-group:2; 
  
  
   -webkit-box-ordinal-group:2; 
  
  
   box-ordinal-group:2; 
  
  
  } 
  
  
  
  
  
  #exemple3.v2{ 
  
  
   -moz-box-ordinal-group:2; 
  
  
   -webkit-box-ordinal-group:2; 
  
  
   box-ordinal-group:2; 
  
  
  } 
  
  
  
  
  
  #exemple3.v3{ 
  
  
   -moz-box-ordinal-group:1; 
  
  
   -webkit-box-ordinal-group:1; 
  
  
   box-ordinal-group:1; 
  
  
  }