「这是我参与11月更文挑战的第十天，活动详情查看：2021最后一次更文挑战」。

往期推荐：

「CSS布局之全屏布局」

「CSS布局（二）之多列布局」

「CSS布局（三）之等分布局」

「CSS布局（四）之文本布局」

前言

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局和布局也算是一种很经典的布局了吧，都是有左中右三列组成的，左右两列固定，中间自适应，高度固定且相等。接下来让我们看看是怎么实现的把。

<div class="layout">
  <div class="layout-left"></div>
  <div class="layout-right"></div>
  <div class="layout-center"></div>
</div>

通过float和margin/pading 实现

大体上圣杯布局和双飞翼布局是一样的，但细节上还是有不一样的地方。

相同点：

• 通过中间列自适应，来完成。

• 通过float来使左右两列向左向右浮动。

不同点：

• 圣杯布局：父节点通过padding为左右列位置。

• 双飞翼布局：中间列通过margin来为左右两列留出位置。

注意：因为浮动节点如果高于前面或平级的非浮动节点，会导致浮动节点下沉。所以在编写HTML的时候，要把中间列挪到右列节点后面。

圣杯布局

.layout {
  width: 1000px;
  height: 800px;
  padding: 0 200px;
  .layout-left {
    float: left;
    width: 200px;
    height: 100%;
    margin-left: -200px;
    background-color: crimson;
  }
  .layout-right {
    float: right;
    width: 200px;
    height: 100%;
    margin-right: -200px;
    background-color: yellow;
  }
  .layout-center {
    height: 100%;
    background-color: blue;
  }
}

双飞翼布局

.layout {
  width: 1000px;
  height: 800px;
  .layout-left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: crimson;
  }
  .layout-right {
    float: right;
    width: 200px;
    height: 100%;
    background-color: yellow;
  }
  .layout-center {
    margin: 0 200px;
    height: 100%;
    background-color: blue;
  }
}

通过flex实现

通过flex实现还是非常简单的，中间列设置flex：1即可自适应。

<div class="layout">
  <div class="layout-left"></div>
  <div class="layout-center"></div>
  <div class="layout-right"></div>
</div>

.layout {
  display: flex;
  width: 1000px;
  height: 800px;
  .layout-left {
    width: 200px;
    background-color: crimson;
  }
  .layout-right {
    width: 200px;
    background-color: yellow;
  }
  .layout-center {
    flex: 1;
    background-color: blue;
  }
}

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！