你不该该只知道flex布局

前言

我能够说是长沙前端群最闲的人了，加了不少个长沙不收费的前端群，即可以吸收别人出现的问题和解决方案来扩充本身知识，同时也可以在帮助解决别人问题上尽本身一份薄力。见过几回问布局的，而群里齐刷刷的都回答flex布局，没有任何一个其余的布局，不知道是确实只知道flex布局仍是知道其余的布局懒的说。 诚然，flex布局真的很好用，可是咱们也应该要了解了解其余方面的布局。本文仅简述除flex外其余两种少见的布局和基本使用方法。

flex

面试前不是很自信的前端都会找一些面试题来为本身充充电，其中一个至关经典的问题就是垂直居中问题。百度一下不少答案，最多见的几个答案无非就是负margin,transform,设置成行内元素而后lineHeight,flex等等。不知道你们发现没有，这些方法中不是须要知道子容器的宽高(负margin,transform)就是不能真正意义上的垂直(设置lineHeight),常见垂直居中布局中只有flex既不须要关心父容器的宽高又不须要关心子容器的宽高就能垂直居中了，这确实很惊艳并且代码量不多，同时flex还有其余不少很高效的用法，深得咱们前端喜好。可是，我说可是了，这基本上是深得移动端的开发的喜好。做为常年开发PC端的我来讲并非常用flex,flex只兼容ie10以上的浏览器(最大痛点),并且老版的flex的写法还不同，一下子display:box,一下子display:flex,还要作兼容处理。有没有其余布局既可以有flex布局的基本能力有能兼容老浏览器呢？有！

table

display:table这个table布局就厉害了（用法涉及到不少api,请自行百度）。首先好久好久之前能用table布局，兼容性是ie8及以上，ie8往下如今的份额应该能够忽略不计了吧，其次就是table布局下对容器宽高变化敏感，简单点说就是具备弹性，响应padding属性内容溢出时会自动撑开父元素，几乎具备flex的基本功能（毕竟年代久远，不可能作到比flex还优秀），下面就来几个实例

• 垂直居中实例，如同flex通常丝滑
• 传统圣杯布局,两栏布局能够同时参考
• 神奇等高布局,适合数据如table展现的场景
• 动态页脚,适合公司官网展示

以上应该是最多见的几种table布局了。缺点也很明显，使用table了，那么它的容器下的横向排列总会是等高的，这就至关尴尬了。还有就是不少api还须要结合html的table标签进行理解，比较费时。也许这也是它不可以好好流行下去的缘由吧。

grid

display:grid我复制一段阮一峰大佬的原话：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，能够看做是一维布局。Grid 布局则是将容器划分红"行"和"列"，产生单元格，而后指定"项目所在"的单元格，能够看做是二维布局。Grid 布局远比 Flex 布局强大。,有多牛掰我就很少说了，api实在太多了，我来稍微总结一下：

• 总体布局样式： grid-template-columns grid-template-rows,决定了整个grid布局横纵的网格数和对应比例。
• 布局间隔：grid-row-gap，grid-column-gap，grid-gap，这三个属性其实就是决定了看不见的网格边线的宽度。
• 布局流向：grid-auto-flow。默认值是row，即"先行后列"。也能够将它设成column，变成"先列后行"。和flex的流向的概念差很少。
• 对齐属性：justify-items，align-items，place-items,justify-content，align-content，place-content。items结尾的就是对单元格内的元素进行对齐排列组合，content结尾的就是对grid内全部网格做为一个总体的对齐排列组合。这里属性不少很复杂，是一个学习难点
• 重点-网格item的属性：grid-column-start：左边框所在的垂直网格线。grid-column-end：右边框所在的垂直网格线。grid-row-start：上边框所在的水平网格线。grid-row-end：下边框所在的水平网格线。注意，最左边或最上边的网格线编号为1而不是0。有了这几个属性，就能够在网格内任务排列本身想要的布局。
• 流动性：grid-auto-flow: row dense;column dense,自动填充网格。能够在例子中去掉属性看效果

下面是几种常见的用法：

• 垂直居中
• 圣杯布局
• 响应式布局
• 常见用法

grid布局基本上能够用来作任何的布局，缺点也很明显，就是兼容性。

float 和 absolute

这两种布局也是最最经常使用的了，可是面对布局问题，彷佛不少人不会第一想到这两个最强兼容性最广泛使用的布局。

总结

对一个页面进行布局每每是一个伪命题，你能够经过各类各样的css搭配来实现你的目的。做为最流行的flex确实受到了不少人的重用，可是严谨的前端工程师，咱们应该在布局前慎重考虑后再选择本身的布局方法和手段，毕竟flex不是万能的。

---

原文连接：tech.gtxlab.com/n_flex.html

*做者简介： 张栓，人和将来大数据前端工程师，专一于 html/css/js 的学习与开发