本人已经很久没用 bootstrap 什么的了，而现阶段一点卑微的梦想就是自己做框架，毕竟也才入门不久。
所以在寻找布局的共通性/稳定性及拓展性时，会发觉 CSS3 的这三种方法比栅栏布局要有趣得多。
可以说有了这些，不用那么强迫症地扣像素，设不设宽高也已经不重要，留白居中之类的更不用各种偏移位置了。
来罗列一下：
1. columns（更适用于等宽）
column-[<length>|auto] 定义每栏的宽度 column-span:1|all 1:只在本栏中显示；all:横跨所有栏目并定位在栏目的Z轴之上。 column-rule-color:<color> 定义每栏之间边框的颜色 column-rule-<length> 定义每栏之间边框的宽度 column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset 边框样式 column-gap:normal|<length> 定义两栏之间的间距距离 column-fill:auto|balanc 定义栏目的高度是否统一 (auto:各栏随意；balance:以最高的为统一) column-count:auto|整数 可以定义栏目的数目 column-break-before:auto|always|avoid 定义元素之前是否断行 column-break-after:auto|always|avoid定义元素之后是否断行
两栏就是 column-count:2; 三栏就是 column-count:3; 这样写起来真是酣畅淋漓...
2. box-flex（更适用于单排）
display: box|inline-box box-flex: <number> （子级元素所占的比例） box-orient: horizontal|vertical|inline-axis|bloack-axis|inherit （横排|竖排|横排|竖排|清除） box-direction: normal|reverse|inhert （顺序|倒序|清除） box-align: stretch|start|end|center|baseline （全高|顶部对齐|底部|居中|文本基线） box-pack: start|end|center|justify （靠左对齐|靠右|居中|自动） box-lines: single|nultiple （不换行|换行） box-ordinal-group: <number> （排序）
一排当中，有的是定宽其他就填充，水平+垂直居中也是 so easy
3. flex（变化更多）
display: flex|inline-flex inline-flex适用于行内元素 flex-direction: row|row-reverse|column|column-reverse (水平|水平反方向|垂直|垂直反方向) flex-wrap: nowrap|wrap|wrap-reverse (不换行|换行|换行且第一排在下方) flex-flow: <flex-direction> <flex-wrap> （省写） justify-content: flex-start|flex-end|center|space-between|space-around align-items: stretch|flex-start|flex-end|center|baseline align-content: stretch|flex-start|flex-end|center|space-between 上面都是父级元素设置的玩意，下面是子级可以设的 order：<number> （默认为0，可以给子级排序） flex-grow: <number> （默认为0，为其他值则为抢占剩余空间的比例） flex-shrink: <number> （默认为1，为0时，空间不足时该元素宽高不缩小） flex-basic: auto|<length> （默认为auto，有值时，空间足够时该元素宽高不缩小） flex: none|<flex-grow> <flex-shrink> <flex-basic> （缩写） align-self: auto|flex-start|flex-end|center|baseline|stretch
这个就很全面了，以上两种的有点都有，而且不但能设父级的，还能设子级的。
但 CSS3 属性的兼容性嘛，实在不好多说什么，不过向来不太考虑兼容的小贱人我，粗暴地调用 prefixfree.min.js 就好了。