order: 3;
width: 200px;
background-color: rebeccapurple;
}
好了，排列的顺序对了，但是发现三个元素挤在一起了，我们需要将两边固定，中间自适应，所以要把左右两个固定在两端，这个也是非常容易，加上一行代码：
main{
display: flex;
justify-content: space-between;/加入这行代码/
}
加入的代码改变了主轴的排列方式，左右两个元素紧贴左右两边，中间的元素也居中了。
最后，剩下的就是将中间的主体改为自适应，弹性布局处理富裕空间还是一件难事吗？一行代码即可：
.center{
order: 2;
flex: 1;/加入这行代码/
background-color: aqua;
}
效果：
完整代码：
*{
margin: 0;
padding: 0;
}
header,footer{
height: 100px;
background-color: #eeeeee;
}
main>div{
height: 100px;
}
main{
display: flex;
justify-content: space-between;
}
.center{
order: 2;
flex: 1;
background-color: aqua;
}
.left{
order: 1;
width: 200px;
background-color: hotpink;
}
.right{
order: 3;
width: 200px;
background-color: rebeccapurple;
}
从上面来看，通过 flex 来实现圣杯布局简直再简单不过了，代码非常简洁，但是如果要考虑兼容性的问题就不是那么适合了。这时候就需要使用下面的第二种方式。
首先，父级容器通过内边距将容器压缩，压缩的空间就是左右两栏固定的宽度：
main{
padding: 0 200px;/添加这行代码/
}
显然，此时的效果就是将盒子压缩了，接着，通过浮动让他们在同一行排列：
main>div{
height: 100px;
float: left;/添加这行代码/
}
一旦开启了浮动，则必然要考虑的问题就是高度塌陷。是的，此时的父容器已经无法由子元素撑开了，高度塌陷了。
main:after{
content: ‘’;
display: block;
clear: both;
}
好了，高度塌陷解决了，但是此时的效果好像距离目标好像也差得太远了，因为浮动，改变了盒子模型，块级元素的流动性被破坏了，所以没有固定宽度的中间元素的宽度收缩到合适了（shrink-to-fit）。所以，还需要解决这个问题：
.center{
width: 100%;/添加这行代码/
background-color: aqua;
}
好了，宽度恢复正常了，但是左右两栏的元素又被挤下去了，所以，最后的问题就是将它们挪动到适合的问题。然后解决这个问题也不难，使用负外边距和定位足以：
.left{
/相对定位将元素挪至左栏位置/
position: relative;
left: -200px;
/负外边距将元素挪至跟中间元素的左上角重叠/
margin-left: -100%;
width: 200px;
background-color: hotpink;
}
右栏元素：
.right{
margin-right: -200px;/将元素挪到右栏位置/
width: 200px;
background-color: rebeccapurple;
}
完整代码：
*{
margin: 0;
padding: 0;
}
header,footer{
height: 100px;
background-color: #eeeeee;
}
main>div{
height: 100px;
float: left;
}
main{
padding: 0 200px;
}
main:after{
content: ‘’;
display: block;
clear: both;
}
最后
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。
96道前端面试题：
常用算法面试题：
前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化
最后
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。
96道前端面试题：
- [外链图片转存中…(img-NHzBzrpG-1718037883732)]
常用算法面试题：
- [外链图片转存中…(img-EcxGGvC1-1718037883733)]
前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化
1376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
