CSS布局技术:从圣杯布局到Flex

三栏布局在 CSS 中是非常常见的布局方式，主要有以下 2 个特点：

中间列在文档流中优先渲染
两侧宽度固定，中间列宽度自适应

在早期的 CSS 布局中，三栏布局衍生出圣杯布局和双飞翼布局。这两种布局方式都是为了解决三栏布局的核心问题，但它们采用了不同的实现方式。让我们深入探讨这些布局技术，并了解现代 flex CSS 如何简化这一过程。

圣杯布局#

圣杯布局是由 Matthew Levine 在 2006 年提出的。它的名字来源于对完美布局的追求，就像寻找圣杯一样。这种布局的核心思想是使用负边距（negative margin）和相对定位来实现三栏布局。

实现步骤：

HTML 结构中，中间内容区域优先渲染。
使用 float 使三列浮动。
对左右两列使用负边距，使其上浮到中间列的两侧。
使用相对定位调整左右两列的位置。

代码示例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>圣杯布局示例</title>
    <style>
      body {
        min-width: 550px;
      }
      #container {
        padding-left: 200px;
        padding-right: 150px;
      }
      #container .column {
        float: left;
      }
      #center {
        width: 100%;
      }
      #left {
        width: 200px;
        margin-left: -100%;
        position: relative;
        right: 200px;
      }
      #right {
        width: 150px;
        margin-right: -150px;
      }
      #footer {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="header">Header</div>
    <div id="container">
      <div id="center" class="column">Center</div>
      <div id="left" class="column">Left</div>
      <div id="right" class="column">Right</div>
    </div>
    <div id="footer">Footer</div>
  </body>
</html>

解析：

#container 设置左右 padding，为左右两列预留空间。
三列都设置 float: left，使其浮动。
#center 宽度设为 100%，占据整个容器宽度。
#left 使用 margin-left: -100% 将其拉到最左侧，再用 right: 200px 相对定位到正确位置。
#right 使用 margin-right: -150px 将其拉到最右侧。

双飞翼布局#

双飞翼布局是淘宝 UED 团队在圣杯布局基础上改进的布局方案。它的主要特点是：

不需要使用相对定位。
增加了一个内部容器用于包裹内容。

实现步骤：

HTML 结构中，中间内容区域优先渲染，并包含一个内部容器。
使用 float 使三列浮动。
对左右两列使用负边距，使其上浮到中间列的两侧。
使用内部容器的 margin 为左右两列腾出空间。

代码示例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>双飞翼布局示例</title>
    <style>
      body {
        min-width: 550px;
      }
      .column {
        float: left;
      }
      #main {
        width: 100%;
      }
      #main-wrap {
        margin: 0 190px 0 190px;
      }
      #left {
        width: 190px;
        margin-left: -100%;
      }
      #right {
        width: 190px;
        margin-left: -190px;
      }
    </style>
  </head>
  <body>
    <div id="header">Header</div>
    <div id="main" class="column">
      <div id="main-wrap">Center</div>
    </div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
    <div id="footer">Footer</div>
  </body>
</html>

解析：

#main、#left、#right 都设置 float: left。
#main 宽度设为 100%，占据整个容器宽度。
#main-wrap 使用 margin 为左右两列腾出空间。
#left 使用 margin-left: -100% 将其拉到最左侧。
#right 使用 margin-left: -190px 将其拉到最右侧。

现代 Flex CSS 实现#

随着 Flexbox 布局模型的普及，实现三栏布局变得更加简单和直观。Flexbox 提供了更强大的布局控制能力，无需使用浮动和负边距等技巧。

代码示例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Flex 三栏布局示例</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      #header,
      #footer {
        background-color: #f0f0f0;
        padding: 20px;
      }
      #content {
        display: flex;
        flex: 1;
      }
      #left,
      #right {
        background-color: #e0e0e0;
        width: 200px;
      }
      #left {
        order: -1;
      }
      #center {
        flex: 1;
        background-color: #d0d0d0;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="header">Header</div>
    <div id="content">
      <div id="center">Center</div>
      <div id="left">Left</div>
      <div id="right">Right</div>
    </div>
    <div id="footer">Footer</div>
  </body>
</html>

解析：

使用 display: flex 和 flex-direction: column 创建垂直方向的 flex 容器。
#content 使用 display: flex 创建水平方向的 flex 容器。
#center 使用 flex: 1 使其自动填充剩余空间。
#left 和 #right 使用固定宽度。
使用order: -1属性控制#left显示在前。

Flex 布局的优势：

代码更简洁，易于理解和维护。
自动处理等高列问题。
响应式设计更容易实现。
无需使用 clearfix 等清除浮动的技巧。

总结：#

圣杯布局和双飞翼布局是早期 CSS 中解决三栏布局问题的巧妙方案，它们利用浮动、负边距和定位来实现复杂的布局需求。然而，随着 Flexbox 的出现，我们现在有了更简单、更直观的方式来创建灵活的布局。Flex 布局不仅简化了代码，还提供了更强大的布局控制能力，使得响应式设计的实现变得更加容易。

在实际开发中，根据项目需求和浏览器兼容性要求，选择合适的布局方式至关重要。对于现代 web 应用，Flex 布局通常是首选方案，但了解传统的布局技术仍然很有价值，特别是在需要支持旧版浏览器的项目中。