android 左右分栏联动布局,自定义页面分栏布局

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

分栏布局实例

基于flex的分栏布局

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

One Grid

Two Grids

Two Grids

Two Grids

.wrapper {

display: flex; /* flex布局默认情况下子元素的高度会填充满父元素 */

margin-top: 10px;

}

[class*='tile-'] {

padding: 10px;

box-sizing