CSS3中新的布局方式主要是多欄布局與盒布局。
多欄布局
使用多欄布局可以將一個元素中的內容分為兩欄或多欄顯示，并且確保各欄中內容的底部對齊。
<style type="text/css">
div#div1{
width:40em;
-moz-column-count: 2;
-webkit-column-count: 2;
}
div#div3{
width:100%;
background-color:yellow;
height:200px;
}
</style>
<div id="div1">
<img src="test.jpg" />
<p>示例文字1。相對來說比較長的示例文字。示例文字。相對來說比較長的示例文字。示例文字。
相對來說比較長的示例文字。示例文字。相對來說比較長的示例文字。示例文字。
相對來說比較長的示例文字。示例文字。相對來說比較長的示例文字。示例文字。</p>
<p>示例文字2。相對來說比較長的示例文字。示例文字。相對來說比較長的示例文字。示例文字。
相對來說比較長的示例文字。示例文字。相對來說比較長的示例文字。示例文字。
相對來說比較長的示例文字。示例文字。相對來說比較長的示例文字。示例文字。</p>
</div>
<div id="div3">
頁面中其他內容
</div>
效果如圖：
在CSS3中，通過
column-count屬性來使用多欄布局方式，該屬性的含義是將一個元素中的內容分為多欄進行顯示。使用多欄布局的時候，需要將元素的寬度設置成多個欄目的總寬度。我們也可以使用
column-width屬性單獨設置每一欄的寬度而不設定元素的寬度。
div#divl{
-moz-column-count:2;
-webkit-column-count:2;
-moz-column-width:20em;
-webkit-column-width:20em;
}
column-gap屬性用來設定多欄之間的間隔距離。
div#div1{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width:20em;
-webkit-column-width:20em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
}
可以使用column-rule屬性在欄與欄之間增加一條間隔線，并且設定該間隔線的寬度、顏色等，該屬性的屬性值的指定方法與border屬性的屬性值指定方法相同。
div#div1{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width:20em;
-webkit-column-width:20em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
-moz-column-rule: 1px solid red;
-webkit-column-rule: 1px solid red;
}
盒布局
盒布局的基礎知識
在CSS3中，通過box屬性來使用盒布局。
<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
}
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
<div id="container">
<div id="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 id="contents">
<h2>內容</h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。</p>
</div>
<div id="right-sidebar">
<h2>右側邊欄</h2>
<ul>
<li><a href="">超鏈接</a></li>
<li><a href="">超鏈接</a></li>
<li><a href="">超鏈接</a></li>
</ul>
</div>
</div>
效果如圖：
盒布局
盒布局與多欄布局的區別
盒布局與多欄布局的區別在于：使用多欄布局時，各欄寬度必須是相等的，在指定每欄寬度時，也只能為所有欄指定一個統一的寬度，欄與欄之間的寬度不可能是不一樣的。另外，使用多欄布局時，也不可能具體指定什么欄中顯示什么內容，因此比較適合使用在顯示文章內容的時候，不適合用于安排整個網頁中由各元素組成的網頁結構時。
彈性盒布局
改變元素的顯示順序
使用彈性盒布局的時候，可以通過box-ordinal-group屬性來改變各元素的顯示順序。可以在每個元素的樣式中加入box-ordinal-group屬性，該屬性使用一個表示序號的整數屬性值，瀏覽器在顯示的時候根據該序號從小到大來顯示這些元素。
#container{
display: -moz-box;
display: -webkit-box;
}
#left-sidebar{
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-flex:1;
-webkit-box-flex:1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
效果如圖：
改變元素的顯示順序
改變元素的排列方向
在CSS3中，使用box-orient來指定多個元素的排列方向。
#container{
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
#left-sidebar{
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-flex:1;
-webkit-box-flex:1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
效果如圖：
改變元素的排列方向
元素寬度與高度的自適應
使用盒布局的時候，元素的寬度與高度具有自適應性，即元素的寬度與高度可以根據排列方向的改變而改變。
<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
</style>
<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>
效果如圖：
水平方向排列
修改上面代碼，改成垂直方向排列。
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
效果如圖：
垂直方向排列
使用彈性盒布局來消除空白
雖然使用盒布局的時候， 元素的高度與寬度具有一定程度的適應性，但是容器中總還是會留出一大片空白的區域。
修改樣式代碼：
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: horizontal;
-webkit-box-orient:horizontal;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
效果如圖：
如果使用彈性盒布局的話，使用了box-flex屬性的元素的寬度與高度總會自動擴大，使得參與排列的元素的總寬度與總高度始終等于容器元素的高度與寬度。
對多個元素使用box-flex屬性
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
效果如圖：
對前兩個div元素使用box-flex屬性
從運行結果中我們可以看出，前兩個div元素的高度都自動擴大了，而且擴大后前兩個div元素的高度保持相等，而第三個div元素的高度仍保持為元素內容的高度。如果三個div元素的樣式中都使用box-flex屬性，則每個div元素的高度就等于容器的高度除以3了。
box-flex屬性代表了什么含義?
修改容器高度為200px，在每個div子元素的樣式代碼中均使用box-flex屬性，但是將第一個div元素的box-flex屬性設定為2，其他兩個div子元素的box-flex屬性仍保留為1，元素排列方向為垂直排列。
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 200px;
}
#text-a{
background-color: orange;
-moz-box-flex: 2;
-webkit-box-flex: 2;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
效果如圖：
從圖我們可以看出，第一個div子元素的高度并不等于其他兩個div子元素的兩倍。box-flex屬性的屬性值的正確含義如圖：
指定水平方向與垂直方向的對齊方式
使用盒布局的時候，可以使用box-pack屬性及box-align屬性來指定元素中文字、圖像及子元素水平方向或垂直方向的對齊方式。
可以為box-pack屬性及box-align屬性指定的屬性值和各種屬性值的含義：
在使用CSS1或CSS2的時候，在
div元素內部直接放置文字的場合下，如果想讓文字水平居中，只要使用text-align屬性就可以了，但是若要讓文字垂直居中，由于div元素是不能使用vertical-align屬性的，所以也就很難做到了。在CSS3中，只要讓div元素使用box-align屬性(排列方向默認為horizontal) ，文字就可以垂直居中了。
<style type="text/css">
div{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
width:300px;
height:200px;
background-color:pink;
}
</style>
<div>示例文字</div>
效果如圖：
讓圖像位于元素正中央：
<style type="text/css">
html, body{
width:100%;
height:100%;
margin:0;
padding: 0;
}
body{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
}
</style>
<img src="tyl.jpg" />
