轉(zhuǎn)載自：百度知道，希洛夜的海角的回答
來(lái)源鏈接：https://zhidao.baidu.com/question/1382041114037934860
雙飛翼、多欄、彈性、流式、瀑布流、響應(yīng)式布局
1，雙飛翼布局
經(jīng)典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國(guó)內(nèi)最早是由淘寶UED的工程師傳播開(kāi)來(lái)，在中國(guó)也有叫法是雙飛翼布局，它的布局要求有幾點(diǎn)：
a、三列布局，中間寬度自適應(yīng)，兩邊定寬；
b、中間欄要在瀏覽器中優(yōu)先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個(gè)額外的DIV標(biāo)簽；
e、要求用最簡(jiǎn)單的CSS、最少的HACK語(yǔ)句；
在不增加額外標(biāo)簽的情況下，圣杯布局已經(jīng)非常完美，圣杯布局使用了相對(duì)定位，以后布局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個(gè)div就可以不用相對(duì)布局了，只用到了浮動(dòng)和負(fù)邊距，這就是我們所說(shuō)的雙飛翼布局。
2，多欄布局
a、欄柵格系統(tǒng)：就是利用浮動(dòng)實(shí)現(xiàn)的多欄布局，在bootstrap中用的非常多。
b、多列布局：柵格系統(tǒng)并沒(méi)有真正實(shí)現(xiàn)分欄效果（如word中的分欄），CSS3為了滿(mǎn)足這個(gè)要求增加了多列布局模塊
3，彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來(lái)提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里項(xiàng)目布局，即使它們的大小是未知或者動(dòng)態(tài)的，這里簡(jiǎn)稱(chēng)為Flex。
Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁(yè)面，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對(duì)位置和大小不變，同時(shí)減少了依賴(lài)于浮動(dòng)布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。
Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會(huì)預(yù)留一些可用空間，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對(duì)大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目，當(dāng)然，如果你的伸縮容器沒(méi)有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會(huì)根據(jù)一定的比例減少伸縮項(xiàng)目的大小，使其不溢出伸縮容器。
4，瀑布流布局
瀑布流布局是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國(guó)內(nèi)流行開(kāi)來(lái)。
5，流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁(yè)設(shè)計(jì)中最常用的兩種布局方式。固定布局能呈現(xiàn)網(wǎng)頁(yè)的原始設(shè)計(jì)效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來(lái)限定布局元素，這樣可以根據(jù)客戶(hù)端分辨率的大小來(lái)進(jìn)行合理的顯示。
6，響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。 響應(yīng)式布局可以為不同終端的用戶(hù)提供更加舒適的界面和更好的用戶(hù)體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用“大勢(shì)所趨”來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。
