利用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