你不应该只知道flex布局-白红宇

你不应该只知道flex布局

阅读量：215 次

发布时间：2019-02-28

本文共 2127 字，大约阅读时间需要 7 分钟。

前言

我可以说是长沙前端群最闲的人了，加了很多个长沙不收费的前端群，即能够吸取别人出现的问题和解决方案来扩充自己知识，同时也能够在帮助解决别人问题上尽自己一份薄力。见过几次问布局的，而群里齐刷刷的都回答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。有了这几个属性，就可以在网格内任务排列自己想要的布局。