CSS相关面试题——三栏等高布局

Taste 发布于2019-08-02 16:08 / 3086人阅读

摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。

题目

最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示

解题 step1

常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动，然后中间盒子给个左右外边距，防止内部元素被浮动元素覆盖。但是这样只是实现了基本的三列布局。

代码如下：

效果如下所示：

step2

乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。常规的css，非table布局很难解决这个问题。于是乎只能利用一些奇淫巧技。代码改动如下:

同样的html片段，这次再看下效果：

实现了等高效果。当时我是记得可以利用负边距实现这个奇淫巧技的，但是笔试纸上写的css写的对不对忘记了。

回顾（原理探究）

这里原理暂且不写，感兴趣的小伙伴可以查询下负边距相关的资料。

展开

在跟面试官聊了以后，其实面试官是想考察我对flex的使用。那么如果用flex该如何实现这种三列布局呢？

flex实现的列布局

要点就是父容器设置为flex容器，子元素会自动变为flex项目。这时候通过给center设置flex:1，让其撑满剩余空间。

这里面试官继续问了: flex是三个属性的缩写，那你知道是哪三个属性吗？
这里直接说答案为：[ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

其中flex-grow规定了对flex项目对剩余空间的分配比例(剩余空间多的话)
flex-shrink规定了容器空间不够时，容器项目要被压缩的比例。
flex-basic一般指项目占据主轴的空间，比如200px;

疑问

这里只对center的值设置了flex:1，那left,right,center的flex默认值分别展开是什么呢？

这里通过F12审查可以得到结果:
.left与.right =>
flex-basic:auto(宽200px);flex-grow:0(不占剩余空间);flex-shrink:1(缩小比例占1份)
.center => flex-basic(0%);flex-grow:1(left与right都为0，所以它占据了全部的剩余空间);flex-shrink:1(缩小比例占1份)
因为当前空间足够，所以这里flex-shrink没有体现。

结语

大概与这道题相关的css知识有这么多，如果是你，能做到哪一步呢？

参考链接

阮一峰的flex布局讲解

云服务器 GPU云服务器三栏布局 html5 三栏布局面试题栈面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54737.html

CSS相关面试题——三栏等高布局

摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...

fsmStudy 2019-08-30 15:56 评论0 收藏0
CSS中的负边距

摘要：之后仔细的百度了一下，发现了这么一个叫做内外补丁负值法的东西。在这个解决方案中，又涉及到了传说中的负。深入研究之后又发现了圣杯布局双飞翼布局等很多示例，确实要好好研究负边距这个东西了。相关推荐那些年，奇妙的圣杯与双飞翼，还有负边距 2015-04-22 时候写的老文，因为希望引用所以拿了出来。那天被一个同学问了一个问题，三列的div，要求父div的高度和三个div的高度都和三个中字数...

cocopeak 2019-08-29 10:57 评论0 收藏0
CSS布局——左定宽度右自适应宽度并且等高布局

摘要：今天有位朋友一早从妙味课堂转来一个有关于布局的面试题，需要解决，花了点时间写了几个放上来与大家分享受。今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出...

dreamtecher 2019-08-29 12:43 评论0 收藏0
面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0