利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
我要評(píng)論在打開(kāi)網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)了火狐默認(rèn)首頁(yè)上有這樣一個(gè)東西。
第一個(gè)css屬性就沒(méi)有看懂。于是乎，開(kāi)始各種找資料，各種看書(shū)。然后把對(duì)于css3伸縮布局盒（flexbox）模型的理解寫成文章，目的是對(duì)flexbox做一個(gè)簡(jiǎn)單的介紹。
1.關(guān)于css3中flexbox需要掌握的知識(shí)
因?yàn)閷?duì)于三列等高自適應(yīng)布局和水平垂直居中對(duì)齊需要一些對(duì)css3中flexbox基礎(chǔ)概念的理解，所以會(huì)對(duì)flexbox的概念做一個(gè)簡(jiǎn)單的介紹，以為后面的實(shí)例做一個(gè)鋪墊。本人一直認(rèn)為，不管學(xué)習(xí)任何知識(shí)，對(duì)于概念的理解都十分重要。
a：伸縮容器：是指通過(guò)display屬性顯示地給一個(gè)元素設(shè)置為flex或者inline-box（標(biāo)準(zhǔn)版本），這個(gè)容器就是一個(gè)伸縮容器。
b：伸縮項(xiàng)目：一個(gè)伸縮項(xiàng)目是伸縮容器的子元素。一個(gè)伸縮容器的內(nèi)容具有零個(gè)以上的伸縮項(xiàng)目--伸縮容器的每個(gè)子元素都會(huì)成為一個(gè)伸縮項(xiàng)目（包括文字，稱為匿名伸縮項(xiàng)目）。
c：伸縮流方向：是指伸縮容器中的主軸方向，可以理解成x軸的方向。伸縮流方向主要通過(guò)flex-direction屬性（標(biāo)準(zhǔn)標(biāo)準(zhǔn)版本）來(lái)設(shè)置，默認(rèn)值為row。
d：伸縮行換行：伸縮項(xiàng)目在伸縮容器中有時(shí)候會(huì)溢出伸縮容器。在伸縮容器屬性中，主要通過(guò)flex-wrap屬性來(lái)設(shè)置伸縮容器是否換行，默認(rèn)值為nowrap。
e：伸縮性：定義伸縮項(xiàng)目可改變伸縮容器的寬度或高度填補(bǔ)可用的空間?？梢詫⑸炜s容器的額外空間分發(fā)給其伸縮項(xiàng)目或?qū)⑺麄兛s小以防止伸縮項(xiàng)目溢出。
2.flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊
html, body {
height: 100%;
width: 100%;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
width: 300px;
height: 300px;
background-color: lightblue;
text-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
<div class="content"><h1>水平垂直居中對(duì)齊</h1></div>
首先，設(shè)置html和body的寬度和高度都為100%，目的是讓其擁寬度和高度，否側(cè)主軸對(duì)齊（box-pack）和側(cè)軸對(duì)齊（box-align）無(wú)法讓伸縮項(xiàng)目之前分布伸縮容器的額外空間。
然后，讓body成為伸縮容器，設(shè)置display屬性為box，設(shè)置box-pack和box-align來(lái)控制主軸對(duì)齊和側(cè)軸對(duì)齊，讓其屬性值都為center。
最后，.content元素成為伸縮容器，這樣其內(nèi)部文字塊會(huì)成為匿名伸縮項(xiàng)目。此時(shí)的.content元素即為伸縮容器，又為伸縮項(xiàng)目。當(dāng)作為伸縮容器的時(shí)候，h1元素為其伸縮項(xiàng)目；當(dāng)作為伸縮項(xiàng)目的時(shí)候，body為其伸縮容器。同樣為.content設(shè)置box-align和box-pack，來(lái)控制側(cè)軸對(duì)齊和主軸對(duì)齊方式 。
效果圖如下，.cotent元素和h1都實(shí)現(xiàn)了水平垂直居中對(duì)齊。
3.三列等高自適應(yīng)，頁(yè)腳區(qū)域黏附底部的布局
對(duì)于三列布局的方法有非常多種，可以通過(guò)對(duì)float+百分比寬度來(lái)實(shí)現(xiàn)，也可以用inline-block配合百分比實(shí)現(xiàn)，但是很難實(shí)現(xiàn)頁(yè)腳黏附瀏覽器可視窗口底部的布局。這里只對(duì)css3三列等高布局做介紹。
做任何的布局效果，都離不開(kāi)HTML結(jié)構(gòu)。
<div id="header">
<h1>頭部</h1>
</div>
<div id="page">
<div id="main">
<h1>主內(nèi)容</h1>
</div>
<div id="sidebar-left">
<h1>左邊欄</h1>
</div>
<div id="sidebar-right">
<h1>右邊欄</h1>
</div>
</div>
<div id="footer">
<p>頁(yè)腳</p>
</div>
假設(shè)頭部和頁(yè)腳的寬度為100%，左右兩欄寬度為200px，而主內(nèi)容自適應(yīng)寬度。
body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
padding: 10px;
background-color: #ccc;
}
#footer {
margin-top: 10px;
}
#sidebar-left, #sidebar-right {
width: 200px;
padding: 10px;
background-color: #f36;
}
這里為body設(shè)置box-sizing是為了讓盒模型的寬度=內(nèi)容寬度+border+padding，避免在設(shè)置padding值時(shí)需要計(jì)算width的寬度。
接下來(lái)，使用伸縮布局盒模型box（舊版本，仍然可以使用），讓#page元素成為伸縮容器，設(shè)置box-flex讓其子元素?fù)碛猩炜s性，自適應(yīng)伸縮容器的剩余空間。
#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
display: -webkit-box;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
上面代碼中，使用為#page元素設(shè)置了display屬性讓其成為一個(gè)伸縮容器。這里要注意的是必須設(shè)置width。如果沒(méi)有設(shè)置width，這里的#main元素的box-flex屬性會(huì)失效，原因在于父容器沒(méi)有寬度，自然無(wú)法填充伸縮容器的額外空間，（這里的額外空間指的是#page元素所占的面積，而不單單指寬度）。為#main元素設(shè)置box-flex屬性是讓其自適應(yīng)伸縮容器的額外寬度。因?yàn)閣ebkit內(nèi)核的瀏覽器（Chrome，Safari）和Gecko內(nèi)核（Firefox）不支持box-flex屬性和box屬性，所以必須添加廠商前綴。
上面實(shí)例中，需要修改一下主內(nèi)容和左邊欄，右邊欄的排列方式，使用box-ordinal-group屬性。
#sidebar-right {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}
上面代碼中，使用了box-ordinal-group屬性，這個(gè)屬性是用于修改伸縮項(xiàng)目在伸縮容器中的顯示順序，默認(rèn)值為1，也就是按照DOM文檔流出現(xiàn)的先后順序進(jìn)行排序。下面重置了box-ordinal-group屬性之后的效果。
至此，這個(gè)頁(yè)面就已經(jīng)做好了。但是出現(xiàn)了一個(gè)問(wèn)題，就是頁(yè)腳區(qū)域不會(huì)黏附在瀏覽器窗口可視區(qū)域底部，這讓用戶體驗(yàn)非常糟糕。
使用css3的flexbox屬性實(shí)現(xiàn)就很簡(jiǎn)單。最關(guān)鍵的技巧就是讓body元素變成一個(gè)伸縮容器，并且使用伸縮性屬性box-flex讓頁(yè)腳區(qū)域之前的div具有伸縮性（也就是#page元素）。也就是說(shuō)，頁(yè)腳區(qū)域前的div會(huì)變成一個(gè)伸縮項(xiàng)目，會(huì)根據(jù)伸縮容器的高度自適應(yīng)填充伸縮容器的額外空間，也就是自動(dòng)拉伸頁(yè)腳區(qū)域前的div填充瀏覽器可視區(qū)域中的所有空間。
如果希望整個(gè)頁(yè)面的布局要和瀏覽器窗口可視區(qū)域一樣高，
首先必須設(shè)置html和body元素的高度和瀏覽器窗口可視區(qū)域高度一樣高。如果少了body高度的設(shè)置，body本身就沒(méi)有高度，當(dāng)然伸縮項(xiàng)目的伸縮性也就無(wú)法體現(xiàn)。
html, body {
height: 100%;
}
其次，讓body元素自身成為一個(gè)伸縮容器，并且設(shè)置伸縮流方向（box-orient）為vertical（舊版本中的屬性）。
body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
}
最后，設(shè)置頁(yè)腳區(qū)域前的div（#page元素）中的box-flex屬性，讓其根據(jù)伸縮容器（這里是指body）的高度自適應(yīng)伸縮容器body的額外空間，也就是自動(dòng)拉伸#page元素的高度。這樣就會(huì)是頁(yè)腳一直在瀏覽器可視窗口底部顯示。
#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: stretch;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: stretch;
}
上面代碼中，#page元素本身是一個(gè)伸縮容器，現(xiàn)在變成伸縮項(xiàng)目。在伸縮布局盒模型中，伸縮項(xiàng)目在側(cè)軸的對(duì)齊方式box-align（舊版本）默認(rèn)值為stretch，（css中可不寫box-align屬性）致使#page元素的三個(gè)伸縮項(xiàng)目都會(huì)自動(dòng)拉伸，不管內(nèi)容高度有多少都具有伸縮容器#page的高度，從而實(shí)現(xiàn)三列等高布局并且頁(yè)腳黏附瀏覽器可視區(qū)域底部的效果。最后附上效果圖。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容，文章總結(jié)的還是很詳細(xì)的，希望對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-06-28CSS實(shí)現(xiàn)頁(yè)面兩列布局與三列布局的方法示例
這篇文章主要介紹了CSS實(shí)現(xiàn)頁(yè)面兩列布局與三列布局的方法示例,包括寬度與高度的自適應(yīng)的示例,需要的朋友可以參考下2016-06-23- 本文為大家詳細(xì)介紹三列布局，分為兩側(cè)定寬中間自適應(yīng)、兩列定寬一側(cè)自適應(yīng)、中間定寬兩側(cè)自適應(yīng)、一側(cè)定寬兩列自適應(yīng)和三列自適應(yīng)五種情況，感興趣的小伙伴們可以參考一下2016-05-04
用CSS實(shí)現(xiàn)三列DIV等高布局以傳達(dá)更好的視覺(jué)效果
頁(yè)面布局中經(jīng)常遇到等高布局的情況，為了得到更好的視覺(jué)效果，就要實(shí)現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來(lái)說(shuō)2014-09-03- CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-27
CSS教程：三列固定網(wǎng)頁(yè)布局實(shí)例
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：我們的講解會(huì)包含一些標(biāo)準(zhǔn)元素，如logo、頂欄、導(dǎo)航欄、文本區(qū)域、 今天網(wǎng)頁(yè)教學(xué)網(wǎng)將向大家講解如何通過(guò)設(shè)計(jì)一個(gè)HTML/CS2009-04-02
詳解CSS多種三列自適應(yīng)布局實(shí)現(xiàn)
這篇文章主要介紹了詳解CSS多種三列自適應(yīng)布局實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2021-02-24