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