手摸手教你实现一个双飞翼布局

分类:css

前言

在页面布局中我们经常会遇到一种布局类型就是 一边或者两边等宽,中间自适应,有时我们还需要让中间布局提前渲染。如下图所示

说到这种布局我们就不得不提一下圣杯布局和双飞翼布局了。

圣杯布局和双飞翼布局是布局届中经常被提起的布局,实际上这两个布局是同一种布局方式,只是实现的方法略有不同,这里只讲双飞翼布局,因为圣杯布局我个人觉得并没有双飞翼布局简洁。

ok,那么如何实现一个双飞翼布局呢?

方法一

最原始的办法就是利用float来实现,代码如下:

1
2
3
4
5
6
7
<div class="box">
<div class="center">
<div class="center-item">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.center,
.left,
.right {
float: left; /* 全部左浮动 */
height: 300px;
}

.center {
width: 100%;
}

.center-item {
height: 300px;
background-color: antiquewhite;
margin-left: 200px; /* margin-left为左边div的宽度 */
margin-right: 300px; /* margin-right为右边div的宽度 */
}

.left {
width: 200px;
background-color: aquamarine;
margin-left: -100%; /* 向左移动100%的距离 */
}

.right {
width: 300px;
background-color: bisque;
margin-left: -300px; /* 向左移动自身的距离 */
}

方法二

如果不考虑兼容性的话最好用的还是flex布局,实现起来也很简单。代码如下:

1
2
3
4
5
<div class="flex-box">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.flex-box {
display: flex;
flex-direction: row; /* 横向排列 */
align-items: stretch; /* 实现等高 */
width: 100%;
height: 300px;
}

.center {
flex-grow: 1; /* 默认占据剩余空间 */
order: 1; /* 排序 */
background-color: antiquewhite;
}

.left {
order: 0; /* 排序 */
width: 200px;
background-color: aquamarine;
}

.right {
order: 2; /* 排序 */
width: 300px;
background-color: bisque;
}

总结

两种实现方法比起来明显 flex 布局要好很多,而且理解起来也更简单,但是兼容性是个问题,所以在有兼容性的时候还需要使用第一种方式。