伸縮盒模型（flexbox）是一個新的盒子模型，主要優化了UI布局。作為實際布局的第一個CSS模塊（浮動真的應該主要用來制作文本圍繞圖片這樣的效果），它使很多任務容易多。Flexbox的功能主要包手：簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能

案例1：水平和垂直居中（網頁設計的圣杯）

HTML:

CSS：

你可能注意到了，h1元素的文本也在內部垂直居中。這里沒使用margin或者line-height，但是我們再次使用了flexbox，讓文本變成了一個匿名伸縮項目（在這個案例中，行文本是h1內的元素）。無論h1元素有多高，文本將永遠垂直居中

總結：通過設置html和body都是100%讓其充滿屏幕顯示，然后使用align-items和justify-content屬性來保證內容的水平垂直居中，我們通過設置body為flex，讓其中所有子元素(不包括絕對定位的元素)都變成了伸縮項目

案例2：伸縮尺寸

HTML和CSS類似于前一個示例。使用相同的方法，把所有元素在頁面中居中顯示。此外，我們讓標題（header元素內）保持不變的尺寸，其他五個盒子（section元素）根據瀏覽器寬度自動調整大小。因此我們要使用一個新的屬性“flex”

我們做的是讓每個section元素占有1flex單元。因為我們還沒有給五個section元素明確的設置寬度，而每個section元素都有相同的寬度。把“header”設置了一個寬度（277px），因為他不是伸縮性的。我們把body剩下的寬度計算到每個section元素中。現在，我們來改變瀏覽器窗口大小，section元素將會擴展或收縮

注：現在可用的空間除以6，而在懸浮狀態是占有2份。注意：一個元素的2flex單元并不一定就是1flex單元寬度的兩倍。它只獲得了添加兩倍比例到他的可用空間的首先寬度。在我們的示例中，首先寬度是0（默認狀態下）

總結

以上是生活随笔為你收集整理的CSS之Flexbox制作CSS布局易如反掌的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。