我们在用css设置页面布局的时，归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应，两边固定的布局方法。
一、flex弹性盒布局： 核心：将父元素设置为弹性盒布局：display:flex;
html代码：
宽度固定
宽度自适应(用flex弹性盒布局)
宽度固定
css代码：
#father{
display: flex;
/*父元素设置为弹性盒*/
flex-wrap: nowrap;
/*不换行*/
width: 100vw;
height: 30vh;
background-color: orange;
text-align: center;
}
#son1{
width: 200px;
/*宽度固定*/
height: 30vh;
background-color: yellow;
}
#son2{
height:30vh;
width: calc(100vw - 400px);
background-color: pink;
}
#son3{
width: 200px;
/*宽度固定*/
height: 30vh;
background-color: lightblue;
}
二、浮动float 父元素不设置定位，三列子元素都设置为左浮动。
自适应的那一列宽度用计算得出：calc(100vw（100%视窗宽度） - 左边宽度 - 右边宽度)。
html代码：
宽固定(float:left)
自适应（float:left）
宽固定(float:left)
css代码：
#dad{/*父元素不设置定位，子元素浮动*/
width: 100vw;
height: 30vh;
background-color: orange;
text-align: center;
}
#Left{
float: left;
width: 200px;
height: 30vh;
background-color: lightgreen;
}
#Center{
float: left;
width: calc(100vw - 400px);
height: 30vh;
background-color: grey;
}
#Right{
float: left;
height: 30vh;
width: 200px;
background-color: red;
}
三、position定位 核心：将父元素设置为position:relative；（相对定位）
子元素设置为绝对定位position:absolute；
左边列(固定宽度)：position:absolute; left:0;
中间列（自适应列）:position:absolute; left:(左边列的宽度); right:(右边列的宽度)
右边列（固定宽度）：position:absolute; right:0;
html代码：
左absolute宽固定
自适应(父元素relative，子元素absolute定位)
右absolute宽固定
【两边宽度固定，中间宽度自适应的几种布局方法】css代码：
#third{
position: relative;
/*父元素设置相对定位*/
width: 100vw;
height: 40vh;
background-color: orange;
text-align: center;
}
#thirdone{
position: absolute;
/*子元素绝对定位*/
left: 0;
/*与左边距离为0*/
width: 200px;
height: 40vh;
background-color: blue;
}
#thirdtwo{
position: absolute;
/*子元素绝对定位*/
left: 200px;
/*中间的子元素与左右的距离=左右列各自的宽度*/
right: 200px;
height: 40vh;
background-color: yellow;
}
#thirdthree{
position: absolute;
/*子元素绝对定位*/
right: 0;
/*与右边距离为0*/
width: 200px;
height: 40vh;
background-color: purple;
}
