八十九、常见的圣杯布局和双飞翼布局
@Author：Runsen
圣杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式。
圣杯布局
圣杯布局是經典的css布局，左右兩欄的寬度固定不變，中間那一欄是自適應。
使用彈性盒子布局實現圣杯模式是最方便最快速且不用擔心移動端的適配問題。雖然浮動布局并不是再是流行的布局方式，不過基于浮動的經典布局還是經常出現在前端面試中。
浮動布局
<head><title>圣杯布局</title><style>.header,.footer {height: 100px;background: #ccc;}.article {height: 300px;padding: 0 200px;/* 改為margin: 0 200px; 看不見黑色 */box-sizing: border-box;background-color: black;}.article .left {width: 200px;height: 100px;background: blue;float: left;position: relative; left: -200px; margin-left: -100%;}.article .right {width: 200px;background:green;height: 100px;float: right;position: relative;right: -200px;/* margin-left = -100%相對于父類的寬度去移動，，為神馬會移上去，，想不通？？？？？ */margin-left: -100%;}.article .center {background: yellow;width: 100%;height: 100%;float: left;}</style> </head> <body><div class='header'>#header</div><div class="article"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div><div class='footer'>#footer</div> </body>浮動布局需要注意的是margin-left: -100%;是什么意思呢？意思就是向左移動整個屏幕的距離
但是在圣杯布局中就會往上移動。
原因為：float元素會依次一行自動排開，寬度不夠時就會換行，而main占據了所有故此，left和right就會換行，這就和display：inline-blick一樣，
當margin-left 為父元素的-100%時，就會上移動一行。行盒放置時，再添加left: -200px;或者right: -200px;回到外邊距的地方
flex布局
Flex 布局是 W3C 2009年提出的，目前已經被所有瀏覽器支持，也是現在布局的首選方案。
flex布局使用的時候，把父容器用 display:flex 設置為flex容器，里面的3個DIV，把固定大小的2個DIV設置固定的高度、寬度（水平的時候設置寬度，垂直的時候設置高度），把自動伸縮的DIV設置 flex:1 即可。就是這么簡單。flex-direction: column 設置3個DIV為垂直方向（設置垂直方向的時候需要設置高度為100%），默認是水平方向。
<head><title>圣杯布局</title><style>div{outline: 1px solid;margin: 2px;}/* 以下為整個頁面的布局 */.main{display:flex;flex-direction: column;height:100%;}.top, .footer{height: 50px;}/* 以下為中間的body布局 */.body{flex: 1;display: flex; }.body-main{flex: 1;background-color: yellow;}.body-left, .body-right{width: 100px;}</style> </head> <body><div class="main"><div class="top">標題欄</div><div class="body"><div class="body-left">左邊導航欄</div><div class="body-main">主內容，自動伸縮</div><div class="body-right">右邊提示欄</div></div><div class="footer">頁腳欄，使用flex布局</div></div> </body>具體的思路我就不再做贅述了，網上到處都是解釋。
雙飛翼布局
圣杯布局的缺點：正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線放大時，「圣杯」將會「破碎」掉。
前提是：當main部分的寬小于left部分時就會發生布局混亂。（main<left即會變形）
于是，淘寶軟對針對「圣杯」的缺點做了優化，并提出「雙飛翼」布局。
而且我們希望中部 main 部分優先顯示的話，是可以做布局優化的。
為了優先顯示中間主要部分，瀏覽器渲染引擎在構建和渲染渲染樹是異步的（誰先構建好誰先顯示），故在編寫時，先構建中間main部分，但由于布局原因，將left置于center左邊，故而出現了雙飛翼布局。
<head><title>Document</title><style>body {padding: 0;margin: 0;}.container {min-width: 400px;height: 200px;background-color: blue;}.left,.right {width: 200px;height: 200px;background-color: green;float: left;}.main {width: 100%;height: 200px;background-color: red;float: left;}.left {margin-left: -100%;}.right {margin-left: -200px;}.main-content {/* 需要給一個margin等于左右邊距 */margin: 0 200px;}.header, .footer{height: 100px;background-color: bisque;}</style> </head><body><div class="header"></div><div class="container"><div class="main"><div class="main-content">中間內容</div></div><div class="left">left</div><div class="right">right</div></div><div class="footer"></div></body>flex布局
flex布局實現雙飛翼布局和圣杯布局完全一樣，因為flex布局沒有出現當當main部分的寬小于left部分時就會發生布局混亂。（main<left即會變形）
因此個人推薦使用flex布局。
總結
以上是生活随笔為你收集整理的八十九、常见的圣杯布局和双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 八十八、CSS两列三列的布局方式
- 下一篇： 九十、深入弹性（Flex）布局