探索三栏布局的艺术：圣杯布局、双飞翼布局与Flex布局的实践前言三栏布局在网页设计中是一种常见的布局模式，通

前言

三栏布局在网页设计中是一种常见的布局模式，通常用于构建具有三个垂直部分的页面，每个部分并排显示。这种布局通常包括一个主要内容区域（通常是中间栏），以及两个侧边栏，一个在左边，另一个在右边。三栏布局可以灵活适应不同的屏幕尺寸，并且在桌面和移动设备上都能提供良好的用户体验。在本文中,Virtual09将会为大家介绍几种实现三栏分布的方法

正文

圣杯布局

我们先来看看页面效果

<body>
  <div class="page">
    <div class="content">主体内容</div>
    <div class="left">广告位左</div>
    <div class="right">广告位右</div>
  </div>
</body>

按照html的加载方式，从上往下读。我们这里要求的是主体内容是优先展示给用户的，所以我们的主体内容要在广告之前展示出来，下面这张图是没有css修饰的

跟我们需要的样式全不同，这里我们给大家介绍一下圣杯布局，先给大家看看基础css样式

<style>
    *{
      margin: 0;padding: 0;
    }
    .page{
      height: 200px;
      padding: 0 200px;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background-color: aquamarine;
    }
    .page div{
    }
    .content{
      width: 100%;
      height: 200px;
      background-color: pink;
    }
    .left{
      position: relative;
    }
    .right{
      position: relative;
    }
  </style>

首先我们将.page div设置成弹性容器，让左右广告跑到同一行中，由于在主体内容中我们存在padding: 0 200px;这个属性，广告位是无法和主体内容在同一行了。所以这里就需要大家要拥有一定的空间想象能力了。第一步，我们让广告左的margin-left:-200px，要由于广告左所在的哪一行，左边的距离不足以支持广告左实现margin-left:-200px,所以这时，广告左就会跑去主体内容哪一行实现margin-left:-200px。

然后在让广告左实现left:-100%就好了。广告右的实现也是和广告左一致的，唯一不同的是，广告右是向右移动-200px的距离。完整的css

<style>
    *{
      margin: 0;padding: 0;
    }
    .page{
      height: 200px;
      padding: 0 200px;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background-color: aquamarine;
    }
    .page div{
      float: left;
    }
    .content{
      width: 100%;
      height: 200px;
      background-color: pink;
    }
    .left{
      margin-left: -200px;
      position: relative;
      left: -100%;
    }
    .right{
      margin-left: -200px;
      position: relative;
      right: -200px;
    }
  </style>

双飞翼布局

双飞翼布局（Double-wing Layout）是另一种实现三栏布局的技术，尤其适用于要求中间栏内容在DOM顺序中位于首位的情况，这有助于内容的快速加载和SEO优化。双飞翼布局的核心思想是利用负的margin和嵌套的div来达到左右两栏固定宽度，中间栏自适应的目的。双飞翼的实现跟圣杯布局相似，都是固定好主体内容的位置，然后让左右广告位通过margin的属性，进行调整，这里就不过多解释了，参考圣杯布局即可！

<style>
    *{
      margin: 0;padding: 0;
    }
    .page{
      height: 200px;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background-color: aquamarine;
    }
    .page > div{
      float: left;
    }
    .content{
      height: 200px;
      background-color: #eb6238;
      width: 100%;
    }
    .inner{
      margin: 0 200px;
      height: 100%;
    }
    .left{
      margin-left: -100%;
    }
    .right{
      margin-left: -200px;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="content">
      <div class="inner">主体内容</div>
    </div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

flex属性实现三栏布局

我们使用flex属性，可以实现弹性布局，这里为大家介绍几个flex属性中的常用属性
flex-shrink: 0;子容器缩小
flex-grow: 1;子容器放大
flex: 1设置允许等比放大 0 就是不允许放大
order: 1;控制容器的位置排放数值越小，排的越早，但是读取html结构不变，只是排序改变不改变加载顺序
想必看完这些，大家就应该大致能猜到flex属性是如何实现三栏布局的吧！我们让广告左的order:0排序在第一个，随后跟上主体内容，广告右。我们直接把广告左右的宽度设死为width:200px,然后在主体内容中的flex:1就表示除了广告左右的宽度，其他的都是主体内容的。

<style>
    *{
      margin: 0;padding: 0;
    }
    .page{
      height: 200px;
      display: flex;
    }
    .left, .right{
      width: 200px;
      background: #1bda34;
    }
    .content{
      background: #e93a3a;
      flex: 1;
      order: 1;
    }
    .left{
      order: 0;
    }
    .right{
      order: 2;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="content">主体内容</div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

本文到此结束，若有不足，恳请各位指出，感谢大家！！！