谁说flex不能实现圣杯布局和双飞翼布局 进来看骚操作
哈喽哈喽，大家好！！！ 我是你们的金樽清酒。最近啊，我在复习css的内容，为面试做准备。记得高中的时候，在上物理课上大家都学到过左手定则吧。老师在上课讲的时候我就在想一定得左手吧，右手不行嘛，左手磁感线穿手心，右手就磁感线穿手背呗。于是我就把我的想法告诉了我的老师，虽然老师说我傻，但是拉近了与老师的距离，后面老师说一看见你我就想起来你的右手定则。希望大家看了之后不要忘记这个用flex实现圣杯布局的男人。只求博人一笑。
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"
圣杯布局和双飞翼布局
我们都知道圣杯布局和双飞翼布局是实战常用的布局方式，非常的牛逼。它们牛逼的点在什么地方呢？那就是将主体部分的html结构放在前面，这种方式可以将重要的内容展示出来，不会先让用户先看广告。
让我们看一下圣杯布局的小demo
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 200px;
padding: 0 200px 0 200px;
}
.left {
width: 200px;
height: 100%;
background-color: aqua;
float: left;
position: relative;
right: 200px;
margin-left: -100%;
}
.content {
width: 100%;
height: 100%;
background-color: cadetblue;
float: left;
}
.right {
width: 200px;
height: 100%;
background-color: bisque;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
双飞翼布局的小demo
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 200px;
}
.conatiner {
height: 100%;
background-color: cadetblue;
padding: 0 200px 0 200px;
float: left;
width: 100%;
box-sizing: border-box;
}
.left {
width: 200px;
height: 100%;
background-color: aqua;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 100%;
background-color: bisque;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="conatiner">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
这两种布局牛逼的地方都是在html结构上将中间主体部分放在前面先加载。那我们能不能用flex来实现呢？
用flex实现圣杯布局和双飞翼布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 200px;
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: aqua;
order: 3;
}
.content {
width: 100%;
height: 100%;
background-color: cadetblue;
flex: 1;
order: 2;
}
.right {
width: 200px;
height: 100%;
background-color: bisque;
order: 1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
弹性布局的方法
</body>
</html>
我们都知道，flex可以轻松实现三栏布局，但是主体内容得放在第二个位置。那我就放在第一个位置，然后用flex里面得order给盒子排序也能达到这个效果，就这样轻松用flex完成了圣杯布局和双飞翼布局一样的办法。可能比较搞笑，但是我还是得给它起个名字叫排序布局吧。
总结
三栏布局是很常见的一种布局方式，将左右两边固定宽度，然后中间的主体内容可以自适应宽度。而圣杯布局和双飞翼布局的html结构将主体放在前面，先加载主体内容，在实际应用的时候就不会让用户看广告了。而用弹性布局可以简单的实现三栏布局，但是主体内容没有放在前面，但是可以放在前面，用order属性调整盒子出现的顺序就行了，但博一乐，轻点喷哦，友友们。
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"