本人已经很久没用 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 就好了。