自定义页面分栏布局

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

flex 布局实例

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

JsFiddle Flex Demo

基于Table 的分栏布局

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

.wrapper {
  width: 100%;
  display: table;
    border-collapse: separate;
    border-spacing: 12px 6px; /* 对父元素设置水平和垂直方向的spacing 来设定table-cell边界之间的空隙
 */
}
.offsetL {
  margin-left: -12px; /*通过设定负 margin 把整个布局贴齐左边，因为border-spacing造成了空隙*/
}
.tile-1-2 {
  display: table-cell;
  width: 50%;
  padding: 10px;  /* 子元素边界和内容间的空隙 */
  // box-sizing: border-box;
  background: lightgrey;
  border: 1px solid red;
}
.tile-1-1 {
  width: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 10px;
  background: lightgrey;
}

JsFiddle Table Demo

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