CSS3中新颖的布局方法

本人已经很久没用 bootstrap 什么的了，而现阶段一点卑微的梦想就是自己做框架，毕竟也才入门不久。

所以在寻找布局的共通性/稳定性及拓展性时，会发觉 CSS3 的这三种方法比栅栏布局要有趣得多。

可以说有了这些，不用那么强迫症地扣像素，设不设宽高也已经不重要，留白居中之类的更不用各种偏移位置了。

来罗列一下：

1. columns（更适用于等宽）

column-width:[<length>|auto] 定义每栏的宽度

column-span:1|all 1:只在本栏中显示；all:横跨所有栏目并定位在栏目的Z轴之上。

column-rule-color:<color> 定义每栏之间边框的颜色

column-rule-width:<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 就好了。