共计 3479 个字符，预计需要花费 9 分钟才能阅读完成。
前端开发，离不开日常的网页构造布局，现下有很多第三方的组件库，也自带着很多布局的计划，例如 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的不同之处。
