在打開網頁的時候，發現了火狐默認首頁上有這樣一個東西。

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

1.關于css3中flexbox需要掌握的知識

因為對于三列等高自適應布局和水平垂直居中對齊需要一些對css3中flexbox基礎概念的理解，所以會對flexbox的概念做一個簡單的介紹，以為后面的實例做一個鋪墊。本人一直認為，不管學習任何知識，對于概念的理解都十分重要。

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

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

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

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

e：伸縮性：定義伸縮項目可改變伸縮容器的寬度或高度填補可用的空間?？梢詫⑸炜s容器的額外空間分發給其伸縮項目或將他們縮小以防止伸縮項目溢出。

2.flexbox實現水平垂直居中對齊

復制代碼代碼如下:
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>　

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

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