自定义页面分栏布局

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

分栏布局实例

基于flex的分栏布局

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

<div class="wrapper">
  <div class="tile-1-1">
    One Grid
  </div>      
</div>

<div class="wrapper offsetL" >
  <div class="tile-1-2">
     Two Grids
  </div>
  <div class="tile-1-2">
     Two Grids<br>
     Two Grids<br>
  </div>
</div>

.wrapper {
  display: flex; /* flex布局默认情况下子元素的高度会填充满父元素 */
  margin-top: 10px; 
}
[class*='tile-'] {
  padding: 10px;
  box-sizing: border-box;
  background: lightgrey;
  border: 1px solid red;
}
.tile-1-1 {
  width:100%;  
}
.tile-1-2 {
  width:50%;
  margin-right: 10px;
}
.tile-1-2:last-child {
  margin-right: 0;
}

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个属性，具体可以参考阮一峰的博客，很生动详细。