前端开发,离不开日常的网页结构布局,现下有很多第三方的组件库,也自带着很多布局的方案,例如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
的不同之处。