各位前端學習的小夥伴，相信我們在寫前端頁面的時候大家都用過百分比布局也就是我們今天所說的流式布局。那麼接下來給大家總結一下流式布局的使用。
一、什麼是流式布局?
網頁布局中包括:靜态布局，流式布局，響應式布局和彈性布局幾種情況。
靜态布局：指的就是網頁中的所有元素都使用px為機關。不管浏覽器具體的大小是多少，始終按照設定的值布局來顯示，由于浏覽器大小不一，這樣的布局很容易在不同裝置中出現滾動條等問題。是以這種布局在移動開發不是主流的布局方式。
流式布局：是頁面中元素的寬度按照螢幕分辨率自動進行适配調整，也就是我們常說的适配，它可以保證目前螢幕分辨率發生改變的時候，頁面中的元素大小也可以跟着改變，是以流式布局是移動端開發常用的一種布局。其他布局方式後面再做總結。推薦了解
web前端課程。
**
二、什麼情況下會用到流式布局?**
- 打開我們移動端頁面的時候，發現不管在哪種移動裝置中，頁面始終都是滿屏顯示如下所示:
圖一：是京東頁面在iphone6，7pluse中的效果:
圖二：是京東頁面在iphone4中的效果:
在移動開發中這種情況下就要用到流式布局實作了，具體的實作如下: 首先在網頁的head标簽中添加meta标簽設定視口。
然後将頁面中的父元素寬度設為100%既就可以實作
- 移動端中導航項要等分父容器，例如攜程移動網頁中，導航在iphone4中導航5等分，在iphoneX中也是5等分，如下所示:
圖一：是iphone4中5等分的效果
圖二：是ipnoneX中5等分的效果
移動開發中遇到這種等分的情況下，也需要用到流式布局實作，以5等分為例，具體代碼如下:
可能有的小夥伴還想到了如果分為其他等分呢?我們的做法都是100% 除以對應的份數就可以了。假如要分為3等份，就100除以3。假如要分為4等份就100除以4即可。
- 在網頁布局中如果出現左右兩側固定大小，中間自适應(聖杯布局，雙飛翼布局)這種經度的布局也需要用到流式布局實作，如下:
流式布局有什麼缺陷？流式布局詳細介紹
具體實作方式如下: HTML結構中先準備3個盒子
然後設定對應的CSS代碼:
流式布局還有其他的情況，例如左側固定大小，右側自适應。右側固定大小左側自适應剩下這兩種情況大家可以參照上面的聖杯布局的方式靈活的實作，這裡就不給大家示範了。
三、流式布局有沒有缺點不足的地方麼?
流式布局是用于解決類似的裝置不同分辨率之間的相容，如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，是以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣(即，這些東西無法變得“流式”)，顯示非常不協調。
web前端學習線路+視訊教程