網格布局：

1.基本網格布局：

最簡單的網格布局，就是平均分布。在容器里面平均分配空間，只是需要設置項目的自動縮放

HTML代碼如下

CSS代碼如下

因為每個網格都已經設置好了固定的百分比空間，唯一要做的就是給這些網格添加自動伸縮的flex

2.百分比布局：

某些網格的寬度設置為固定的百分比，其余網格平均分配剩余的空間

HTML代碼如下

CSS代碼如下

我們要做的就是給每個流體特性盒子設置自動伸縮和占據的主軸空間即可

圣杯布局：

圣杯布局（Holy Grail Layout）指的是一種最常見的網站布局。頁面從上到下，分成三個部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導航、主欄、副欄

HTML代碼如下

CSS代碼如下

先設置整體為flex布局，整體的高度為瀏覽器視口的高度，且主軸方向是垂直的，這樣就保證了頭部、內容和底部的是按照從上之下的方式排列而不是從左至右

然后將頭部和底部設置自動伸縮且高度由內容決定

最后將內容部分也設置為flex布局，讓中間的部分寬度自適應，再定死兩個邊欄在主軸上所占據的空間，還得讓他們都保證是自動縮放的，這樣就完成了一個flex的圣杯布局

輸入框布局：

我們常常需要在輸入框的前方添加提示，后方添加按鈕

HTML代碼如下

CSS代碼如下

先整體設置flex布局，然后讓中間的輸入框部分自動伸縮即可

固定的底欄：經典的Sticky Footer布局

有時，頁面內容太少，無法占滿一屏的高度，底欄就會抬高到頁面的中間。這時可以采用Flex布局，讓底欄總是出現在頁面的底部

HTML代碼如下

CSS代碼如下

設置容器最小高度為視口的高度，并將主軸垂直排列保證是從上至下的順序（注意此時底欄仍然是抬高至頁面中央的，我們必須讓內容自動伸展占據主軸多余的空間來將頁腳擠下去，從而實現頁腳下沉的效果），所以最后設置內容部分的flex讓其自動伸縮占據完主軸剩余的空間，繼而完成了頁腳貼底的頁面布局

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Flex布局实战篇的全部內容，希望文章能夠幫你解決所遇到的問題。

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