Question

自定义页面分栏布局

Answer 1

想必大家经常都用到Grid 栅格系统来实现分栏布局，比如BootStrap这种常用的前端UI库中，分栏布局是最常见的功能。假如不想用BootStrap这类整套解决方案的话，也可以自己实现，正巧最近在实现这块，所以随手记一下。

在面对现代浏览器的时候，利用display: flex 是一个很好的解决方案。为何要用flexible box 布局，因为现在主流的浏览器基本都已经支持这个CSS 属性（除了IE9 及以下的浏览器），并且可以实现灵活的布局调整。

从上图可以看出，虽然第二排的两个元素内容不一样多，但是高度依然一致地 填满了父元素 ，这一点对于带背景色的Grid布局很方便。而且想要实现 内容居中 也很方便，只需要设定父元素的align-items和justify-content 两个属性为center 即可。

JsFiddle Flex Demo

flex布局最大的问题就是不支持IE9，那么为了浏览器版本兼容可以用table标签来定义分栏或者设定块级元素的display属性为 table，table-row，table-cell等来模拟table 标签的布局效果。一般来说，将想要并列布局的子元素设为table-cell，父元素设定为table 就可以实现

JsFiddle Table Demo

以上知识点虽然很简单。。但真是 用的时候方恨少 。flex 布局其实总共也就12个属性，具体可以参考 阮一峰的博客 ，很生动详细。