三列布局面试题延伸

昨日和 @喻木大大聊面试的时候聊到了这个话题,其实这个问题挺常见的,不过自己面试到还没问过,问过自适应的等比正方形布局。不过聊到这个问题,下面就详细的说下解决思路和考察要点。希望下次不要被榆木童鞋刷掉了😂。

解决这个问题,先简单描述下具体的需求吧:

给出三列布局,左右两边宽度一定,比如120px啦,然后中间的自适应宽度,即浏览器随着窗口大小的变化而自动变化。

问题大致就是这些,其实思路很多,不过我们从css的发展说起吧。在不同的阶段给出不同的解决方法。

首先我们回到上个世纪,当css还没形成的时候,我们写页面,大家都知道依赖于table布局,所以我们可以用table去模拟这个情况,相信大家很快有思路咯。

<table>
  <tbody>
    <tr height="100%">
      <td width="200" bgcolor="#1ba1e2"></td>
      <td> this is center</td>
      <td width="200" bgcolor="#1ba1e2"></td>
    </tr>
  </tbody>
</table>
See the Pen two-fixed-column-table by Jack Pu (@Jack_Pu) on CodePen.

当然这个思路肯定被淘汰啦,那我们回到CSS Level1。出现了box model以及float的使用。这个思路也是目前大多数解决方案中的一种。因为使用起来及极其方便,三个DIV少量的属性就解决了。左右浮动起来div然后中间用margin表示出间隔就好。

div{
  height:100%;
}
.center-wrap{
  margin:0 200px;  
}
.left-wrap,.right-wrap{
  width:200px;
  background:#1ba1e2;
}
.left-wrap{
  float:left;
}
.right-wrap{
  float:right;
}
See the Pen two-fixed-column-float by Jack Pu (@Jack_Pu) on CodePen.

到了CSS Level2,我们可以巧妙的利用position 去完成这样的功能,同样就是使用绝对定位,让元素在分别两边现实。

div{
  height:100%;
}
.center-wrap{
  margin:0 200px;  
}
.left-wrap,.right-wrap{
  position:absolute;
  top:0;
  width:200px;
  background-color:#1ba1e2;
}
.left-wrap{
  left:0;
}
.right-wrap{
  right:0;
}
See the Pen two-fixed-column-position by Jack Pu (@Jack_Pu) on CodePen.

当然我们现在步入了CSS3,如果不用考虑太多的兼容性,我们可以大胆的使用flex语法来实现这个功能.

我们让外部盒子支持flex,然后设置需要自适应的DIV flex:1;然后再通过order来实现对顺序的控制。


.container{
  position:relative;
  display:flex;
}
div{
  height:100%;
}
.center-wrap{
  flex:1;
  order:2;
}
.left-wrap,.right-wrap{
  width:200px;
  background:#1ba1e2;
}
.left-wrap{
  order:1;
}
.right-wrap{
  order:3;
}

HTML结构如下

<div class="container">
    <div class="center-wrap">this is center</div>
  <div class="left-wrap"></div>
  <div class="right-wrap"></div>
</div>
See the Pen two-fixed-column-flex by Jack Pu (@Jack_Pu) on CodePen.

当然我们还可以已经被纳入草案的CSS Grid

是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级

CSS Grid(网格布局)算是相对目前实践较少的布局方案,来源浏览器支持的范围以及需要重新学习的新语法。由于浏览器支持问题,所以需要手动开启一些配置。

在Chrome浏览器中开启CSS Grid Layout模块功能比较简单,只需要在您的浏览器地址栏中输入:chrome://flags,回车后在列表清单中找到“启用实验性网络平台功能”(#enable-experimental-web-platform-features)

布局大致思路就是我们把 grid-template-columns 划分为

grid-template-columns: 200px auto 200px;
--200 ---- auto ---- 200 
|
|  grid-template-rows 100%;
|
--200 ---- auto ---- 200 

然后给每个DIV指定 grid-area就好了。

.container{
  position:relative;
  display:grid;
  grid-template-columns: 200px auto 200px;
  grid-template-rows: 100%;
   grid-template-areas: "lt cr rt"
}
div{
  height:100%;
}
.center-wrap{
  grid-area: cr;
}
.left-wrap{
  grid-area: lt;
  background:#1ba1e2;
}
.right-wrap{
  grid-area: rt;
  background:#1ba1e2;
}
See the Pen two-fixed-column-css-grid by Jack Pu (@Jack_Pu) on CodePen. ** 确保你的浏览器开启支持了 CSS Grid **

虽然这个问题很简单,但是却十分基础,可以考验一个知识的扎实度和深度。所以希望能够帮助到大家,尤其最后一个解决思路,肯定会让你的面试官觉得你还是个好学的好孩子的。