八十九、常见的圣杯布局和双飞翼布局
@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）布局