到目前为了还没有看出什么效果来。

值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。

看看有什么效果产生，当我们设置了#main的宽度后。

#main { 
background: yellow; 
width: 800px; 
}

但是我们仍有个疑问，为什么aside不占据剩余的全部空间呢？我们可以用新属性box-flex来试下。

box-flex  使得元素占据整个空间。

aside { 
display: block; /* cause is HTML5 element */
background: red; 
/* take up all available space */
-moz-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
}

使用这个属性后，不管#main有多宽，aside都将占据整个可用的空间。同时你也不必担心诸如float等产生的问题，像使得元素被排挤到下一行。

我只是在这儿肤浅的说一下，请参阅保罗爱尔兰优秀文章的详细信息。然而，使用此方法的时候也应注意一下兼容问题，例如老的浏览器应该先测试下，并且提供必要的备注。

出处：蓝色理想
责任编辑：bluehearts

上一页 你需要熟知10个的CSS3属性 [7] 下一页 你需要熟知10个的CSS3属性 [9]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。