面试中被问到吐血的css知识点（一）：两列或三列自适应布局

说在前面

这是一个系列的文章，有兴趣的朋友可以查看此系列其它文章（持续更新ing）。本人才疏学浅，若有纰漏还请及时指出，请多指教！

情境描述

1、两列的情况

左侧固定宽度为200px，右侧占据剩余空间并随浏览器窗口大小变化而变化，比如浏览器宽度1200px，右侧宽度1000px；浏览器宽度800px，右侧宽度600px。

2、三列的情况

左侧和右侧均固定宽度为200px，中间部分占据剩余空间并随浏览器窗口大小变化而变化。比如浏览器宽度1200px，中间宽度800px；浏览器宽度800px，中间宽度400px。

正题

这是一个高频css布局面试题了，第一次被问倒就不应该有第二次了，现在我们总结一下方法。

1、浮动 + 绝对定位（或display：flow-root；或overflow：hidden）

/*****  两列的情况  *****/
.left{
    width: 200px;
    float: left;   
    background: deeppink;
}

.right{
    /*  取消right的文字环绕效果，要触发BFC，所以 绝对定位、或overflow: hidden或display: flow-root;均可 */
    position: absolute;
    left: 200px;  // 这里可以用margin-left: 200px;代替
    top: 0;
    background: deepskyblue;
}

/***  .right的另外一种写法：calc()执行一些计算，运算符两侧必须要有空格，此处是屏幕宽减掉左侧固定宽度 **/
.right{
    float: left;
    width: calc(100% - 200px);
    background: deepskyblue;
}


/*  三列的情况  */
.left{
    width: 200px;
    float: left;
    background: deeppink;
}

.right{
    width: 200px;
    float: right;
    background: deepskyblue;
}

.middle{
    background: gold;
    position: absolute;
    left: 200px;   // 左侧元素总宽度
    right: 400px;  // 右侧元素总宽度
    top: 0;
}

 

2、弹性盒子

弹性盒子方法比较简单，代码如下：

body{
    display: flex;  // 这里注意兼容性
}

.left,.right{
    width: 200px;
    background: deeppink;
}

.right{
    background: gold;
}

.middle{
    flex: 1;
    background: deepskyblue;
}

.middle为宽度自适应的元素，不管是两列还是三列，设置自适应元素flex：1即可。这是因为flex：1相当于如下代码：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

设置了flex：1的弹性盒子会伸长自身吸收容器剩余空间。flex是以上三个属性的简写。

参考资料

flex https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex