自适应的布局是开发中常用的，也是常考的。
首先说到自适应就不得不说弹性布局flex，flex不多赘述，自行去百度，但很多文档对于flex的介绍不详细。下面是对于flex布局文档的补充：
flex属性 是 flex-grow、flex-shrink、flex-basis的缩写。flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：
.item {flex: 2333 3222 234px;}
.item {
flex-grow: 2333;
flex-shrink: 3222;
flex-basis: 234px;
}当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：
-
auto：首先检索该子元素的主尺寸，如果主尺寸不为auto，则使用值采取主尺寸之值；如果也是auto，则使用值为content。 -
content：指根据该子元素的内容自动布局。有的用户代理没有实现取content值，等效的替代方案是flex-basis和主尺寸都取auto。 -
百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为
auto一样。
具体布局解析：
一.三列布局，左右固定，中间自适应
1.左右浮动或使用绝对定位，中间使用margin
.left,.right,.middle{
height: 600px;
}
.left{
width: 200px;
float：left
}
.middle{
margin: 0 310px 0 210px;
}
.right{
width: 300px;
float：right
}2.flex布局
.container{
width:100%;
display:flex;
}
.left,.right{
height:500px;
}
.middle{
flex:1
}简单说一下flex布局，使用flex布局时在容器中设置display:flex,容器上较为常用的属性有justify-content和align-items，设置center可使容器内元素水平居中和垂直居中。容器内元素常用的属性为flex，flex的默认值是 0 1 auto，设置flex为1时，元素大小为响应式，随空间大小放大缩小。
二.正方形边长自适应
.fang{
width:100%;
padding-bottom:100%
}内边距的百分比是根据宽度的。