前端开发，离不开日常的网页结构布局，现下有很多第三方的组件库，也自带着很多布局的方案，例如Ant Design中就拥有一套自己的Grid 24栅格系统和Layout布局，方便我们进行网页排版。
接下来，我们从前端技术角度上，去分析一下3种经典布局的实现方案。
首先，我们列出一些比较常规的布局：
- 圣杯布局
- 双飞翼布局
- 多列等分布局
1. 圣杯布局
圣杯布局： 左右两栏的宽度固定不变，中间那一栏宽度自适应，且中间盒子的内容优先渲染。
最早的圣杯布局的实现方案是：利用
浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置
margin 负值将其移动到上一行，再利用相对定位，定位到两边。
圣杯布局的优缺点：
- 优点：不需要额外的DOM结构，中间栏放在文档流前面是优先渲染
- 缺点：特殊情况下，当中间盒子宽度小于左盒子的时候 就会发生布局混乱
我们可以通过3种技术方案来实现圣杯布局的布局效果，分别是float、float优化、Flex
实现代码：
HTML结构：
<div class="main">
<!-- 如果是圣杯布局的原始方案，此处的center盒子要放在最前面 -->
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
- 实现方案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空出左右两列的宽度。
<body>
<div class="main">
<div class="center">
<div class="inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
.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实现多列等分布局
关键点：列数可自由控制（无固定宽度）
<div class="main">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.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的不同之处。
网友评论