圣杯布局是一種比較經(jīng)典的布局方案。目前各大商城首頁(yè)都采取該布局方案瑞筐。目前有兩種實(shí)現(xiàn)方式比較流行，分別是傳統(tǒng)的css+div的布局方案以及由css3的flex特性實(shí)現(xiàn)的更簡(jiǎn)潔的布局方案腊瑟。兩種方案各有優(yōu)缺點(diǎn)聚假，那么，讓我們看看具體的實(shí)現(xiàn)吧闰非。
傳統(tǒng)的css+div實(shí)現(xiàn)方式
傳統(tǒng)模式的基本原理為：利用容器元素的padding偏移和子元素的浮動(dòng)和margin偏移特性實(shí)現(xiàn)圣杯布局膘格。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
padding-left: 200px;/*設(shè)置容器內(nèi)邊距的左側(cè)偏移量，為左側(cè)邊欄騰出顯示空間财松，大小和左側(cè)邊欄寬度一致瘪贱。*/
padding-right: 150px;/*設(shè)置容器內(nèi)邊距的右側(cè)偏移量，為右側(cè)邊欄騰出顯示空間辆毡，大小和左側(cè)邊欄寬度一致菜秦。*/
}
#container .column {
float: left;/*容器的所有子元素都進(jìn)行左浮動(dòng)*/
height: 400px;
}
#header {
background-color: grey;
}
#center {
width: 100%;/*主內(nèi)容區(qū)，為相對(duì)大小舶掖，會(huì)根據(jù)屏幕寬度自動(dòng)調(diào)整自身大小*/
background-color: green;
}
#left {
width: 200px;
margin-left: -100%;/*浮動(dòng)之后球昨，向左偏移整個(gè)父容器寬度的長(zhǎng)度，這樣使left能夠越過(guò)center眨攘，排在center前面*/
position: relative;
right: 200px;/*相對(duì)父容器右移自身長(zhǎng)度主慰，占據(jù)父容器騰出的左側(cè)邊欄空間*/
background-color: red;
}
#right {
width: 150px;
margin-right: -150px;/*向左移動(dòng)自身長(zhǎng)度，占據(jù)父容器騰出的右側(cè)邊欄空間*/
background-color: yellow;
}
#footer {
clear: both;/*清除浮動(dòng)影響*/
background-color: grey;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="column">content</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
關(guān)于圣杯布局有以下細(xì)節(jié)需要注意：center元素必須排在left和right之前鲫售。原因在于center元素為主內(nèi)容區(qū)共螺。由于通常的商城首頁(yè)需要加載的內(nèi)容都比較多，我們希望在網(wǎng)絡(luò)較為極端的情況下情竹，優(yōu)先顯示主內(nèi)容區(qū)藐不。
基于Flex彈性布局的圣杯布局
彈性布局由于其特性，在實(shí)現(xiàn)圣杯布局是非常簡(jiǎn)單鲤妥，代碼可讀性更好佳吞。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
display: flex;/*設(shè)置彈性布局容器*/
}
#header, #footer {
background-color: grey;
}
#center {
flex: 1;/*設(shè)置彈性伸縮比，1表示1：1的伸縮比*/
background-color: red;
height: 400px;
}
#left {
flex: 0 0 300px;/*前兩個(gè)參數(shù)設(shè)置元素為不能伸縮棉安，后一個(gè)參數(shù)設(shè)置一個(gè)固定的初始值*/
order: -1;/*元素排序向左移動(dòng)一位底扳，排在center前面*/
height: 400px;
background-color: yellow;
}
#right {
flex: 0 0 200px;/*前兩個(gè)參數(shù)設(shè)置元素為不能伸縮，后一個(gè)參數(shù)設(shè)置一個(gè)固定的初始值*/
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
以上的注釋行是關(guān)鍵代碼贡耽。需要注意的細(xì)節(jié)是衷模，left元素的oder：-1屬性實(shí)現(xiàn)元素排序往左移動(dòng)一位鹊汛，以達(dá)到元素在center渲染完之后渲染，卻顯示在center元素之前的效果阱冶。該效果在極端網(wǎng)絡(luò)條件下就能體現(xiàn)出來(lái)刁憋。
兩種方式的優(yōu)缺點(diǎn)
可以看到，傳統(tǒng)的圣杯布局采用的是css+div的布局方式木蹬，在實(shí)現(xiàn)細(xì)節(jié)上主要利于padding至耻，margin，float等一些偏移屬性镊叁。這些屬性是非常常規(guī)的屬性尘颓，在各瀏覽器的表現(xiàn)都非常一致，因此這種方式的兼容性非常好晦譬。在不同內(nèi)核的瀏覽器之間疤苹，以及桌面和移動(dòng)設(shè)備的表現(xiàn)上都非常一致。即使在IE6敛腌，IE5這樣的古老瀏覽器上也能完美的呈現(xiàn)效果卧土。缺點(diǎn)是代碼可讀性不太好，它采用了一些不太常規(guī)的偏移操作像樊，容易讓人產(chǎn)生困惑尤莺。
flex的實(shí)現(xiàn)方式可讀性好，代碼簡(jiǎn)單凶硅。但是缝裁，flex是css3.0的新特性扫皱。對(duì)于移動(dòng)端來(lái)說(shuō)足绅，各大瀏覽器基本都支持css3.0，但是桌面環(huán)境就比較復(fù)雜韩脑。仍然有一些老項(xiàng)目運(yùn)行在IE6上氢妈，這樣就會(huì)造成兼容性問(wèn)題。那么比較推薦的做法是：如果項(xiàng)目只針對(duì)移動(dòng)端段多，就采用flex布局首量，如果桌面端和移動(dòng)端都要兼顧，就采用傳統(tǒng)布局进苍。由于彈性布局是css的新特性加缘，下面我們來(lái)看一下彈性布局給我們提供了哪些操作空間。
彈性布局
彈性布局依賴(lài)主軸和交叉觉啊。我們一般地可以將主軸和交叉軸比作x軸和y軸拣宏，但如果項(xiàng)目需要，我們也可以將主軸設(shè)置為縱軸杠人，這樣主軸就相當(dāng)于y軸勋乾，而交叉軸就相當(dāng)于x軸了宋下。或許另一種比喻更為恰當(dāng)辑莫，將主軸視為布局軸学歧，交叉軸視為對(duì)齊軸。即主軸表示元素的排列方向各吨，交叉軸表示元素的對(duì)齊方向枝笨。關(guān)于彈性布局，它包括容器屬性和項(xiàng)目屬性揭蜒，一共12個(gè)屬性伺帘。其中容器屬性作用于容器中的所有項(xiàng)目，起到一個(gè)整體布局的作用忌锯，項(xiàng)目屬性作用于容器中具體的子元素伪嫁，起到一個(gè)細(xì)節(jié)調(diào)整的作用。掌握這些屬性的用法偶垮，就掌握了彈性布局张咳。
容器屬性如下：
flex-direction /*設(shè)置主軸方向，可以設(shè)置橫向和縱向似舵，默認(rèn)為橫向*/
flex-wrap /*設(shè)置當(dāng)主軸方向空間不足時(shí)脚猾，是否換行*/
flex-flow /*flex-direction，flex-wrap的簡(jiǎn)寫(xiě)形式*/
justify-content/*設(shè)置主軸對(duì)齊方式砚哗，取值范圍：flex-start | flex-end | center | space-between | space-around*/
align-items /*交叉軸對(duì)齊方式龙助，取值范圍：flex-start | flex-end | center | baseline | stretch*/
align-content /*主軸間的對(duì)齊方式，取值范圍：lex-start | flex-end | center | baseline | stretch*/
項(xiàng)目屬性如下：
order //元素在容器中的排列順序蛛芥，越小越靠前提鸟，默認(rèn)為0
flex-grow //元素在容器中的放大比例，在沒(méi)有剩余空間或設(shè)置為的情況下仅淑，不放大称勋。默認(rèn)值為0
flex-shrink //元素在容器中的縮小比例，當(dāng)空間不足時(shí)涯竟，元素將等比縮小赡鲜，默認(rèn)為1，如果設(shè)置為0庐船，則不縮小
flex-basis //設(shè)置一個(gè)固定空間银酬，瀏覽器根據(jù)固定空間可以計(jì)算出剩余空間，默認(rèn)值為auto
flex //flex-grow筐钟，flex-shrink揩瞪，flex-basis的簡(jiǎn)寫(xiě)模式
align-self //單獨(dú)定義自身的對(duì)齊方式，覆蓋容器的align-items屬性
好了盗棵，就到這里吧壮韭，希望你有所收獲北发。晚安。喷屋。琳拨。
