CSS实现圣杯布局（双飞翼布局）的四种方式

本文链接：https://blog.youkuaiyun.com/m0_53130738/article/details/126581772

① calc() 函数

- calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)；
任何长度值 都可以使用calc()函数进行计算；
calc()函数支持 '+', '-', '*', '/' 运算；
calc()函数使用 标准的数学运算优先级 规则；

代码演示：

注：

行内块之间有默认间隙，通过浮动可以清除。
vh：相对长度单位，相对于当前视口高度的百分之几( Viewport Height )，同理，也有vw，相对于当前视口宽度的百分之几，很少用

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    display: inline-block;
  }

  div:first-child {
    width: 200px;
    height: 100vh;
    background-color: aquamarine;
  }

  div:nth-child(2) {
    width: calc(100% - 410px);
    height: 100vh;
    background-color: tomato;
  }

  div:last-child {
    width: 200px;
    height: 100vh;
    background-color: rgb(11, 141, 46);
  }
</style>

<body>
  <div>
    ABCDEFG
  </div>
  <div>1234567</div>
  <div>无产阶级联合起来！</div>
</body>

② 左右浮动实现圣杯布局

注意：两个浮动的标签要写在一起，否则会造成一个左浮动的上去了，右浮动的卡在"严查自纠"的下面浮不上来，即使上面有空余空间！

代码演示：

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .one {
    float: left;
    width: 200px;
    height: 100vh;
    background-color: gold;
  }

  .two {
    height: 100vh;
    background-color: aquamarine;
  }

  .thr {
    float: right;
    width: 200px;
    height: 100vh;
    background-color: blueviolet;
  }
</style>

<body>
  <div class="one">正本清源</div>
  <div class="thr">全面治理</div>
  <!-- 两个浮动的标签要写在一起，否则会造成一个左浮动的上去了，右浮动的卡在"严查自纠"的下面浮不上来，即使上面有空余空间 -->
  <div class="two">严查自纠</div>
</body>

③ 绝对定位加内边距实现圣杯布局

没什么好说的，怪异盒模型加不加无关紧要，代码演示：

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .ONE {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: gold;
  }

  .TWO {
    height: 100vh;
    padding: 0 200px;
    background-color: rgb(103, 5, 5);
    color: #fff;
  }

  .THR {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100vh;
    background-color: rgb(185, 19, 19);
  }
</style>

<body>
  <div class="ONE">德玛西亚</div>
  <div class="TWO">诺克萨斯</div>
  <div class="THR">黑色玫瑰</div>
</body>

④ 弹性布局实现圣杯布局（最简单）

主要靠弹性布局的flex-grow属性：

flex-grow 属性指定了flex容器中剩余空间 的多少应该被分配给项目。flex-grow设置的值为扩张因子，默认为 0，剩余空间将会按照这个权重分别分配给子元素项目。
-
例如：父元素的宽度为500px，其中有两个元素A和B，A的宽度为100px，B的宽度为150px。假如不设置flex-grow属性，那么父元素的剩余宽度为：
500 - ( 100 + 150 ) = 250px。
假如A、B两个元素设置的flex-grow权重分别为a、b，那么A元素得到的剩余空间为：
250 * a/(a+b)
B元素得到的剩余空间为：
250 * b/(a+b)

相反的，flex布局也有flex-shrink属性：

flex-shrink 用来定义弹性盒子内部子元素的缩小比例。也就是当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。

flex-shrink 只有当子元素宽度的和大于父元素时才能生效，所以 flex-shrink 和 flex-grow 不可能同时生效。

flex-shrink 默认值为 1 。当取值为0时，表示子元素不缩小。当取值大于1时，表示子元素按一定的比例缩小。取值越大，缩小得越厉害。

具体算法和 flex-grow 不同，详见：缩小比例：flex-shrink
或者善用搜索引擎~~~

代码演示：

<style>
  * {
    margin: 0;
    padding: 0;
  }

  nav {
    display: flex;
  }

  .Fir,
  .Thr {
    width: 200px;
    height: 100vh;
    background-color: rgb(28, 78, 244);
  }

  .Sec {
    flex-grow: 1;
    background-color: aquamarine;
  }
</style>

<body>
  <nav>
    <div class="Fir"></div>
    <div class="Sec"></div>
    <div class="Thr"></div>
  </nav>
</body>