深入理解圣杯布局和双飞翼布局

前言

圣杯布局与双飞翼布局，都是属于三列布局的经典布局。
双飞翼布局是圣杯布局的优化版，由淘宝UED提出
它们的效果图类似，但是实现方法不同。

字面意思

圣呗布局和双飞翼布局从字面意思来看是这样的：

一个像圣杯或者像展翅的禽类这样的布局

通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

两者本质

image.png

圣杯布局

原理：利用父级padding内边距

是三列布局，两边固定宽度，中间自适应
中间内容元素在 dom 元素次序中优先位置

预览链接：圣杯布局

缺点：.mian的最小宽度不能小于.aside的宽度

image.png

把整个页面的宽度收缩后，会出现布局错乱的效果，因为当页面收缩时，main因为是其父容器content的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度<aside的宽度，就不能容纳aside，所以将其挤到了下一行。

解决方法：可以给父容器content加上一个min-width样式，min-width的值不能小于aside和extra两者间的宽度最大值，这样做可以使中间的main的宽度始终比extra和aside大，就不会导致布局错乱了。

源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    div
    <div id="content">
      <!-- 自适应元素至于顶层，否则其他元素位置错乱 -->
      <div class="main">main</div>

      <div class="aside">aside</div>
      <div class="extra">extra</div>
    </div>
  </body>
</html>

#content{
  border:1px solid #999;
  padding-left: 100px; /*利用内边距填充内容,且填充元素的宽度必须一致*/
  padding-right: 100px;/*利用内边距填充内容,且填充元素的宽度必须一致*/
  min-width:200px;/*防止不断挤压宽度，main宽度过小，造成布局错乱*/
}

#content:after{/*清除浮动*/
  content:'';
  display:block;
  clear:both;
}

.main, .aside, .extra{ /*元素全部浮动*/
 float:left;
}

.main{
  background:blue;
  height:350px;
  
  width: 100%; /*宽度自适应*/
}

.aside{
  background:red;
  width: 100px;/*利用父级内边距填充内容,宽度与父级宽度必须一致*/
  height:300px;
 
  margin-left: -100%; /*减去浮动main的宽度，置于main层级左边*/
  
  position: relative;
  left: -100px;/*移动到父级内边距中*/
}

.extra{
  background:yellow;
  width: 100px;  /*利用父级内边距填充内容,宽度与父级宽度必须一致*/
  height:300px;
  
  margin-left: -100px; /*减去浮动aside的宽度，置于main层级右边*/
  
  position: relative; 
  left: 100px;/*移动到父级内边距中*/
}

双飞翼布局

原理：利用自身margin外边距

是三列布局，两边固定宽度，中间自适应
中间内容元素在 dom 元素次序中优先位置

预览链接：双飞翼布局

源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="content">
      <!-- 自适应元素至于顶层，否则其他元素位置错乱 -->
      <div class="main">
        <div class="wrap">main</div>
      </div>
      <div class="aside">aside</div>
      <div class="extra">extra</div>
    </div>
  </body>
</html>

#content{
  border:1px solid #999;
}
#content:after{/*清除浮动*/
  content:'';
  display:block;
  clear:both;
}
.main,.aside,.extra{/*元素全部浮动*/
  float:left;
}


.main{
  width:100%;/*宽度自适应*/
}
.wrap{ /*子级wrap负责设置外边距*/
  background:blue;
  margin-left: 100px;  /*利用外边距填充内容,且填充元素的宽度必须一致*/
  margin-right: 100px; /*利用外边距填充内容,且填充元素的宽度必须一致*/
  height:350px;

}

.aside{
  width:100px;/*利用外边距填充内容,宽度与兄弟wrap宽度必须一致*/
  height:300px;
  background:red;

  margin-left:-100%;/*减去浮动main的宽度，置于main层级左边*/
}
.extra{
  width:100px;
  height:300px;
  background:yellow;

  margin-left:-100px;/*减去自身的宽度，置于main层级右边*/
}

总结

圣杯布局是给三列的父元素（content），加上左margin 和右margin（或者 padding），将三列挤到中间来，这样左边和右边就会预留出位置。
双飞翼布局是在main的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

参考文章：https://juejin.cn/post/6844903817104850952#heading-4