CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型(Flexible Box)，用來提供一個更加有效的方式制定、調(diào)整和分布一個容器里項目布局，即使它們的大小是未知或者動態(tài)的，這里簡稱為Flex。

Flexbox布局常用于設(shè)計比較復(fù)雜的頁面，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。

Flexbox布局在定義伸縮項目大小時伸縮容器會預(yù)留一些可用空間，讓你可以調(diào)節(jié)伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個伸縮項目，當(dāng)然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據(jù)一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，Flexbox布局功能主要具有以下幾點(diǎn)：

第一，屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局；

第二，可以指定伸縮項目沿著主軸或側(cè)軸按比例分配額外空間(伸縮容器額外空間)，從而調(diào)整伸縮項目的大小；

第三，可以指定伸縮項目沿著主軸或側(cè)軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間；

第四，可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；

第五，可以控制元素在頁面上的布局方向；

第六，可以按照不同于文檔對象模型(DOM)所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。

Flexbox規(guī)范版本眾多，瀏覽器對此語法支持度也各有不同，接下來的內(nèi)容以最新語法版本為例向大家展示：

1.創(chuàng)建一個flex容器

任何一個flexbox布局的第一步是需要創(chuàng)建一個flex容器。為此給元素設(shè)置display屬性的值為flex。在Safari瀏覽器中，你依然需要添加前綴-webkit，

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex項目顯示

Flex項目是Flex容器的子元素。他們沿著主要軸和橫軸定位。默認(rèn)的是沿著水平軸排列一行。你可以通過flex-direction來改變主軸方向修改為column，其默認(rèn)值是row。

3.Flex項目列顯示

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

4.Flex項目移動到頂部

如何實(shí)現(xiàn)將flex項目移動到頂部的效果，關(guān)鍵點(diǎn)：取決于主軸的方向。justify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。 如果主軸是水平的方向，通過align-items設(shè)置；如果主軸是垂直的方向，通過justify-content設(shè)置。

.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

(未完待續(xù)，下一節(jié))

總結(jié)

以上是生活随笔為你收集整理的html伸缩布局,CSS3 伸缩布局（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。