經典三欄佈局之聖盃、雙飛翼、彈性佈局
經典三欄佈局之聖盃、雙飛翼、彈性佈局
聖盃佈局和雙飛翼佈局是前端工程師需要掌握的佈局方式，兩者功能相同，都是為了實現兩側寬度固定，中間寬度自適應的佈局方式，此外，使用新增的flex佈局，可以使佈局更加簡單。
雙飛翼佈局和聖盃佈局雖然實現方式有所差異，但是基本上都遵循了以下幾點：
-
兩側寬度固定，中間寬度自適應
-
中間結構在DOM上優先，以便於優先渲染
下面依次介紹聖盃佈局、雙飛翼佈局、彈性佈局實現三欄佈局
聖盃佈局
一、搭建主體結構
我們先搭建主體框架，將主體結構寫出來
<div class="header"></div> <div class="container"></div> <div class="footer"></div>
我們將為左右預留出一定的空間，作為左右固定兩欄的位置
.container{
padding-left:200px;
padding-right:150px;
}
這時，我們的主體結構變成這樣了
二、新增中、左、右三列
接下來我們將左、中、右三列新增到主體框架中
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
注：注意container內三欄的先後順序，center寫在最前面
隨後給三列設定寬度和浮動，然後給footer新增清除浮動
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
注：此時為center新增的100%寬度，是父元素的內容寬度，因為父元素有左右padding，所以center的寬度只是中間欄的寬度
且由於center佔據了內容寬度的100%，所以導致左右列被換行。得到以下效果：
三、移動left塊
由於center，寬度的影響，導致left和right被擠到下一行，這裡我們可以將它們看作在同一行，為left新增負外邊距。
#left {
width: 200px;
margin-left: -100%;
}
注：這裡的-100%是指父元素內容寬度的100%,所以，left會移動到最左側，如下圖示
隨後我們為每個塊新增相對定位，並使left相對自己偏移200px，正好可以覆蓋center的padding值。
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px;
margin-left: -100%;
right: 200px;
}
4、移動right塊
接下來我們將right塊移到右邊，我們依舊可以將其看作和center同行。這裡依舊採用負外邊距。
#right {
width: 150px;
margin-right: -150px;
}
現在，聖盃佈局就已經完全成功了。
雖然我們已經將聖盃佈局成功的寫了出來，但是要考慮到，當頁面縮小時如何保證頁面的正確顯示？這就涉及到了最小寬度，但並不是簡單的left+right = 350px;仔細想一想，此前我們對left設定了相對定位。所以left的200px存在於center上，所以最小寬度為200+150+200 = 550px;因此，再添上下面這段程式碼：
body {
min-width: 550px;
}
整體佈局css為：
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
雙飛翼佈局
一、搭建DOM結構
搭建主體結構
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
新增css程式碼
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}#container {
width: 100%;
}
.column {
float: left;
}
雙飛翼佈局的DOM結構與聖盃佈局的區別是用container僅包裹住center，另外將.column類從center移至container上。將得到如下所示的效果
以上程式碼將container,left,right設定為float: left，而在container內部，center由於沒有設定浮動，所以其寬度預設為container的100%寬度，通過對其設定margin-left和margin-right為左右兩列預留出了空間。
二、移動left塊
將left放置到預留位置：
#left {
width: 200px;
margin-left: -100%;
}
如圖：
三、移動right塊
#right {
width: 150px;
margin-left: -150px;
}
如圖：
最後計算最小頁面寬度，我們最好把寬度留大一些。
body {
min-width: 500px;
}
整體程式碼佈局css為：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
Flex彈性三欄佈局
一、搭建DOM結構
搭建主體結構
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
新增flex彈性盒子
.container {
display: inline-flex;
flex-direction: row;
width: 100%;
}
.left {
width: 200px;
}
.center {
flex: 1;
width: 100%;
}
.right {
height: 300px;
width: 150px;
background: rgb(252, 78, 39);
}
記得一定要給center塊新增flex:1，這是必要的，否則將無法實現兩邊固定，中間彈性的佈局
如圖
&n