【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】
写这篇文章主要是为了解决一个实际遇到的问题：
左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。
基础知识：元素float之后的变化
1.原本为inline或原本为block的元素，设置了float: left 或 float: right之后，会变得具有inline-block元素的特性，即：不独占一行，且可以设置宽和高。
2.与position:absolute;的脱离文档流不同的是：float的几个元素，它们在同一个文档流中。
3.float半脱离文档流：两个元素中的前一个设置了float:left;，对于后续元素的元素来说，前一个元素是脱离文档流的，也就是会占据元素的位置；对于后续元素的内容来说，前一个元素又是占据文档流的，也就是不会覆盖前一个元素的内容。如图所示：
方法一： float + calc()
//html
<div class="wrap">
<div class="left">left</div>
<div class="right"><p>我要居中</p><p>center</p></div>
</div>
//css
.wrap {
width: 500px;
background: yellow;
overflow: hidden;
}
.left {
float:left;
width: 100px;
background: blue;
}
.right{
float:left;
background: red;
text-align:center;
}如果我们仅仅这样写，那么效果会像下图这样：
可以看到右侧元素的宽度并不是页面剩余宽度。原因是：右侧元素float之后具有了行内块级元素的特性，即宽度为auto。所以无法占满剩余宽度。
这不是我们想要的结果，所以我们要自己设置右侧元素的宽度：
.right {
width: calc(100% - 100px);
}
就符合我们的要求了：
方法二：position / float + margin-left
//html部分同上
//css
.wrap {
position: relative;
width: 500px;
background: yellow;
}
.left {
position:absolute;
left: 0; /*或 float:left; */
width: 100px;
background: blue;
}
.right{
margin-left: 100px;
background: red;
text-align:center;
}
原理是：左侧元素float: left或者设置position: absolute 之后脱离了文档流，右侧其实依然是一个霸道的独占一行的块级元素（block），设置margin-left为左侧元素宽度之后，看起来就像是两个元素在同一行，且右侧元素宽度自适应啦：
方法三：及其方便的flex
.content {
width: 500px;
background: blue;
display: flex;
}
.left {
background: pink;
width: 100px;
}
.right {
background: yellow;
text-align: center;
flex: auto;
}