CSS - 你能尽量多的说出两边固定，中间自适应的三栏布局如何做吗

难度级别：初级及以上                                 提问概率：65% 

---

前端面试中，布局类题目被问道的频次会非常高，这道题，我们通过以下四种方式来实现。

目录

1 使用flex布局

2 使用绝对定位和margin配合的方式

3 使用float和margin配合的方式

4 使用display:table的方式

---

1 使用flex布局

 使用flex的弹性布局，将左右两边设置为justify-content: space-between，可以很轻松的实现效果，代码如下

HTML代码：
<div class="box">
<div class="left">居左</div>
<div class="center">中间</div>
<div class="right">居右</div>
</div>
CSS代码：
<style>
.box {
display: flex;
justify-content: space-between;
}
.left, .right {
width: 100px;
height: 100px;
border: 1px solid red;
}
.center {
width: 100%;
border: 1px solid blue;
}
</style>

2 使用绝对定位和margin配合的方式

左右使用绝对定位的方式，可以固定在两侧，同时这两个元素也已经脱离文档流，中间元素则可以占满一行，只要预留出左右margin值即可，margin值需要大于等于左右元素的宽度，代码如下

HTML代码：
<div class="box">
<div class="left">居左</div>
<div class="center">中间</div>
<div class="right">居右</div>
</div>
CSS代码：
<style>
.box {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 98px;
height: 98px;
border: 1px solid red;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 98px;
height: 98px;
border: 1px solid red;
}
.center {
margin: 0 100px;
height: 98px;
border: 1px solid blue;
}
</style>

3 使用float和margin配合的方式

左右使用固定且浮动的方式，中间元素与上一种实现方式类似，采用margin控制距离左右两边的距离即可。但使用float的方式，存在一个很大的问题，就是整体宽度如果超出父元素的话，最后的浮动元素会被挤到下一行去。所以要变动一下HTML元素的位置，把中间元素放到最后去。代码如下

HTML代码：
<div class="box">
<div class="left">居左</div>
<div class="right">居右</div>
<div class="center">中间</div>
</div>
CSS代码：
<style>
.box {
overflow: hidden;
}
.left {
float: left;
width: 98px;
height: 98px;
border: 1px solid red;
}
.right {
float: right;
width: 98px;
height: 98px;
border: 1px solid red;
}
.center {
margin: 0 100px;
height: 98px;
border: 1px solid blue;
}
</style>

4 使用display:table的方式

为父元素设置display:table，子元素设置display:table-cell，这样每个元素就可以做为块级表格来布局了。左右两侧元素固定宽度，中间元素设置宽度100%，即可达到自适应的效果，代码如下

HTML代码：
<div class="box">
<div class="left">居左</div>
<div class="center">中间</div>
<div class="right">居右</div>
</div>
CSS代码：
<style>
.box {
display: table;
table-layout: fixed;
width: 100%;
}
.left, .right {
display: table-cell;
width: 98px;
height: 98px;
border: 1px solid red;
}
.center {
display: table-cell;
width: 100%;
height: 98px;
border: 1px solid blue;
}
</style>

---

刷题思考

    想要回答好这类题目，position定位、float浮动以及flex弹性布局，是必须要掌握好的几个知识点，而且还要将他们灵活的组合运用起来，尽量多的给出面试官答案，这样的回答才是完美的。

---

类似考点

    这道题相关的考点主要是围绕CSS布局相关的，面试官可能还会问这些问题，例如管理员平台业务模块区域自适应布局是如何实现的？例如你实现过圣杯布局吗？例如请你说一下如何实现一个双飞翼布局？例如请你说一说瀑布流布局如何实现？