在打開網(wǎng)頁的時候，發(fā)現(xiàn)了火狐默認(rèn)首頁上有這樣一個東西。

第一個css屬性就沒有看懂。于是乎，開始各種找資料，各種看書。然后把對于css3伸縮布局盒（flexbox）模型的理解寫成文章，目的是對flexbox做一個簡單的介紹。

1.關(guān)于css3中flexbox需要掌握的知識

因?yàn)閷τ谌械雀咦赃m應(yīng)布局和水平垂直居中對齊需要一些對css3中flexbox基礎(chǔ)概念的理解，所以會對flexbox的概念做一個簡單的介紹，以為后面的實(shí)例做一個鋪墊。本人一直認(rèn)為，不管學(xué)習(xí)任何知識，對于概念的理解都十分重要。

a：伸縮容器：是指通過display屬性顯示地給一個元素設(shè)置為flex或者inline-box（標(biāo)準(zhǔn)版本），這個容器就是一個伸縮容器。

b：伸縮項(xiàng)目：一個伸縮項(xiàng)目是伸縮容器的子元素。一個伸縮容器的內(nèi)容具有零個以上的伸縮項(xiàng)目–伸縮容器的每個子元素都會成為一個伸縮項(xiàng)目（包括文字，稱為匿名伸縮項(xiàng)目）。

c：伸縮流方向：是指伸縮容器中的主軸方向，可以理解成x軸的方向。伸縮流方向主要通過flex-direction屬性（標(biāo)準(zhǔn)標(biāo)準(zhǔn)版本）來設(shè)置，默認(rèn)值為row。

d：伸縮行換行：伸縮項(xiàng)目在伸縮容器中有時候會溢出伸縮容器。在伸縮容器屬性中，主要通過flex-wrap屬性來設(shè)置伸縮容器是否換行，默認(rèn)值為nowrap。

e：伸縮性：定義伸縮項(xiàng)目可改變伸縮容器的寬度或高度填補(bǔ)可用的空間。可以將伸縮容器的額外空間分發(fā)給其伸縮項(xiàng)目或?qū)⑺麄兛s小以防止伸縮項(xiàng)目溢出。

2.flexbox實(shí)現(xiàn)水平垂直居中對齊

復(fù)制代碼代碼如下:
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;
}

復(fù)制代碼代碼如下:
<div class=”content”><h1>水平垂直居中對齊</h1></div>　

　
首先，設(shè)置html和body的寬度和高度都為100%，目的是讓其擁寬度和高度，否側(cè)主軸對齊（box-pack）和側(cè)軸對齊（box-align）無法讓伸縮項(xiàng)目之前分布伸縮容器的額外空間。

然后，讓body成為伸縮容器，設(shè)置display屬性為box，設(shè)置box-pack和box-align來控制主軸對齊和側(cè)軸對齊，讓其屬性值都為center。