使用flex布局解决圣杯布局问题，主要有两种方式。
- 方式一：父元素设置
display:flex,子元素中左右盒子1和3设置固定的width和height,中间子盒子不设置width，而是利用flex: 1让中间子盒子2瓜分父元素留下来的空间，这里的1表示是占据父盒子-1盒子width-3盒子width的宽度。效果示例：代码： HTML结构：
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
CSS样式：
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 80px;
margin: 50px auto;
background-color: pink;
}
section div:nth-child(1),section div:nth-child(3) {
width: 80px;
height: 80px;
background-color: skyblue;
}
/* 选中section子代第二个且是p标签的元素 */
section div:nth-child(2) {
flex: 1;
height: 80px;
background-color: green;
}
- 方式二：完全利用flex属性设置在1、2、3盒子上，让2盒子占据分数比1和2盒子多，例如我们这里可以设置总的份数为6份，左右盒子各占1份，中间盒子占据4份，1、2和3比例分别为：1:4:1，效果图：
HTML结构：
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
CSS样式：
.box {
display: flex;
width: 60%;
height: 80px;
background-color: pink;
margin: 0 auto;
}
.box span {
flex: 1;
}
.box span:nth-child(2) {
flex:4;
background-color: purple;
}
flex布局可以很好地解决类似JD搜索栏这种，例如下面京东搜索栏是个很典型的圣杯布局，
另一种布局方式可以参考我的上一篇分享 # postion：absolute# 定位属性解决圣杯布局问题，这种相对flex来说较为麻烦，没有flex用的那么简洁、清爽，个人推荐使用flex布局用在圣杯布局问题。
最后附上完整代码：欢迎点赞|分享|收藏|交流。❥(^-)❥(^-)❥(^_-)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex解决圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 80px;
margin: 50px auto;
background-color: pink;
}
section div:nth-child(1),section div:nth-child(3) {
width: 80px;
height: 80px;
background-color: skyblue;
}
/* 选中section子代第二个且是p标签的元素 */
section div:nth-child(2) {
flex: 1;
height: 80px;
background-color: green;
}
.box {
display: flex;
width: 60%;
height: 80px;
background-color: pink;
margin: 0 auto;
}
.box span {
flex: 1;
}
.box span:nth-child(2) {
flex:4;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
