前端经典网页布局的实现方案你了解多少？

前端开发，离不开日常的网页结构布局，现下有很多第三方的组件库，也自带着很多布局的方案，例如Ant Design中就拥有一套自己的Grid 24栅格系统和Layout布局，方便我们进行网页排版。

接下来，我们从前端技术角度上，去分析一下3种经典布局的实现方案。

首先，我们列出一些比较常规的布局：

• 圣杯布局
• 双飞翼布局
• 多列等分布局

1. 圣杯布局

圣杯布局： 左右两栏的宽度固定不变，中间那一栏宽度自适应，且中间盒子的内容优先渲染。

最早的圣杯布局的实现方案是：利用浮动和负边距来实现。

父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

圣杯布局的优缺点：

• 优点：不需要额外的DOM结构，中间栏放在文档流前面是优先渲染
• 缺点：特殊情况下，当中间盒子宽度小于左盒子的时候 就会发生布局混乱

我们可以通过3种技术方案来实现圣杯布局的布局效果，分别是float、float优化、Flex

实现代码：

HTML结构：

• 实现方案1：float+position+负边距

.main {
    height: 200px;
    /* 外层大盒子设置左右的padding，给两侧小盒子预留出位置 */
    padding: 0 200px;
}
.center, .left, .right {
    /* 三个盒子统一左浮动 */
    float: left;
}

/* 注意，在HTML结构中，center盒子一定要位于left和right盒子之前 */
.center {
    /* 中间盒子占据父盒子宽度的100% */
    width: 100%;
    height: 100%;
    background: lightgreen;           
}

.left {
    width: 200px;
    height: 100%;
    background: lightseagreen;

    /* left被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */
    margin-left: -100%;

    /* 通过定位负值让left盒子位于main盒子预留出的padding的位置 */
    position: relative;
    left: -200px;
}

.right {
    width: 200px;
    height: 100%;
    background: lightskyblue;
    /* right被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */
    margin-left: -200px;

    /* 通过定位负值让right盒子位于main盒子预留出的padding的位置 */
    position: relative;
    right: -200px; 
}

• 实现方案2：float优化

.main {
    width: 100%;
    height: 100px;
}

.left {
    width: 200px;
    height: 100%;
    background: lightcoral;
    /*  左盒子左浮动  */
    float: left;
}

.right {
    width: 200px;
    height: 100%;
    background: lightgreen;
    /* 右盒子右浮动 */
    float: right;
}

.center {
    height: 100%;
    background: lightsalmon;
    /* 中间盒子左浮动 */
    float: left;
    /* 中间盒子使用css的calc()去自动计算宽度，思想为：父盒子宽度100% - (左盒子 + 右盒子) */
    /* 注意：如果网页中在意极致加载速度等优化效率时，尽量不要大量使用calc()函数  */
    width: calc(100% - 400px);
}

• 实现方案3：Flex

.main {
    width: 100%;
    height: 100px;
    /*  父盒子转为flex弹性盒子  */
    display: flex;
    /*  子元素居中  */
    justify-content: center;
    align-items: center;
}

.left {
    width: 200px;
    height: 100%;
    background: lightcoral;
}

.right {
    width: 200px;
    height: 100%;
    background: lightgreen;
}

.center {
    height: 100%;
      background: lightsalmon;
    /*  中间盒子占据剩下的全部空间  */
    flex: 1;
}

当然，实现圣杯布局的效果，还可以使用其它的方案，比如Grid布局方式，只要能够实现其圣杯布局的效果，用什么方式均可以。

---

2. 双飞翼布局

概念：双飞翼布局最早是淘宝团队提出的，是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题

双飞翼布局的实现，本质上也是利用了浮动和外边距负值的思想。

双飞翼布局与圣杯布局的不同之处在于，圣杯布局的左中右三列容器，中间center盒子多了一个子容器，通过控制center中子容器的margin空出左右两列的宽度。

.main {
    height: 200px;
}

.center,
.left,
.right {
    /* 三个盒子统一左浮动 */
    float: left;
}

.center {
    /* 中间大盒子占据父盒子宽度的100% */
    width: 100%;
    height: 100%;
    background: lightgreen;
}

.center .inner {
    height: 100%;
    /* 预留出左右两个盒子的空间 */
    margin: 0 200px;
    background: lightcoral;
}

.left {
    width: 200px;
    height: 100%;
    background: lightseagreen;

    /* left被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */
    margin-left: -100%;
}

.right {
    width: 200px;
    height: 100%;
    background: lightskyblue;
    /* right被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */
    margin-left: -200px;
}

---

3. Flex实现多列等分布局

关键点：列数可自由控制（无固定宽度）

.main {
    width: 100%;
    display: flex;
    /* 设置换行 */
    flex-wrap: wrap;
    /* 用来设置网格行与列之间的间隙,是row-gap(行间隙)和column-gap(列间隙)的简写形式 */
    gap: 20px;
}
.main .item {
    height: 200px;
    /* 关键点在于子盒子宽度的计算上 */
    /* flex: 0 0 calc((父元素宽度 - 列之间的宽度*(列数-1)) / 列数); */
    flex: 0 0 calc((100% - 20px * 3) / 4);
    background: lightskyblue;
}

以上3中布局，是我们开发中经常见到的布局方式，每种布局方式，都不仅限于一种技术来实现，可以是Float和Position，也可以是Flex，还可以是Grid，甚至有的开发者对Boostrap很熟悉，也是一种实现方式。

个人认为，每种技术方案的使用，都有其优缺点，或考虑兼容性，或考虑性能，选择适合当下项目的内容，适当做取舍，才是最关键的。

关注我，下期我们一起探讨Grid和Flex的不同之处。