CSS布局基础：两列 or 三列自适应

【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】

写这篇文章主要是为了解决一个实际遇到的问题：
左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了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;
}

参考资料：
http://www.imooc.com/video/774/0