CSS三列布局、自适应
首先写一个父级div，再写三个子级别div（左、中、右），如下：
<body>
<div class="all">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
css中，父级元素设置flex，子集元素的左右块固定，中间块设置成弹性布局
<style>
.all{
display: flex;
}
.left,
.right{
width: 50px;
height: 100px;
background-color: #54a0ff;
}
.middle {
flex: 1;
background-color: #f12f04;
}
</style>
效果如下：
当更改左右两边任意一块的大小，中间块会自适应宽度