前提
在介绍布局排版之前，我们首先引入一个尺寸单位，这个尺寸单位是在 CSS3 中新引入的，它就是 rem ，所有引用 rem 定义的字体大小都是相对于根元素 <html>文本的大小，相对于使用 em，这种方式将我们从手动计算字体大小的繁琐过程中解脱出来。
效果一
demo01.png
只要利用 CSS3 提供给我们的新属性，我们可以很轻易的做出这么一个效果。下面我们针对用到的几个主要属性进行讲解。
-
column-width: 用于指定列的宽度，一旦指定一个值，浏览器会根据当前浏览器的宽度，动态的决定将内容分为多少列。 -
column-rule: 这个属性是一种简写，其实它包含了三个不同的属性，分别是column-rule-width,column-rule-style,column-rule-color，反正实现的就是在列之间加上一个分割线，和border属性的设置是相同的。 -
column-gap: 用于设置分栏的空隙属性，这个值由分栏两侧平摊。
如果想要实现分栏，我们可以利用 column-width ，也可以使用 column-count 属性，但是我们通常不这么做，因为这意味着必须要将内容分成三列，而不考虑当前浏览器的宽度，这是非常不友好的设计。
利用 column-width 的优点是，我们的列数跟随浏览器窗口的变化而变化（响应式），即列数 = 浏览器宽度 / columnWidth, 不过这么做也有一个显而易见的问题，那就是我们很难把握 column-width 数值大小，如果过大，那对于中等屏幕可能都仍然是一列，如果过小，那么在大屏幕上又会分成过多的列。
利用 column-count 的优点是，我们可以随心所欲的设置列数，保证布局达到我们想要的结果，这么做的缺点就是列数是固定的无法跟随浏览器宽度的变化而发生改变，这就导致了很严重的问题，比如对于一个 480px 宽的设备，我们设置为两列，那么可能只显示两三个单词就要换行，非常的不友好。
实际上，我们可以同时采用 column-width和 column-count，什么意思呢？比如说我们设置 column-width=480px; column-count=2的时候，这两个属性就会相互制约，也就是说对于相当大的屏幕，比如说 2100px宽的屏幕，它也只会显示两列，因为我们设置了 column-count = 2，但是对于小屏幕，比如 640px 宽的屏幕，由于 column-width=480px，这就意味着放不下两列，这时就会变成一列。
可见，同时利用这两个属性就可以克服二者的缺点而集中二者的优点。
知道了以上属性之后，相信你可以很快的将我们示图中的效果实现出来，这里我们不在粘贴源代码，你可以 点此下载 。这里需要将一下，我们在页面中引用了一些好看的字体，如果你也想使用，你住需要将下面这一行代码粘贴到你的 <head> 标签下即可。
<link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>
效果二
demo02.png
这个效果我们使利用 Flexbox 实现的，下面针对用到的几个属性进行讲解。
-
display: 如果想要使用Flexbox布局，那么我们首先要将这个属性的值设置为flex。 -
flex-flow: 这个属性其实是两个属性的缩写，其中一个是flex-direction用于设置主轴的方向，如果设置为row则是一水平方向为主轴，如果为column垂直方向为主轴。还有一个属性是flex-wrap， 用于设置元素换行，当元素超出父元素宽度时就自动换行，这就可以实现自适应屏幕的效果。 -
flex: 这个属性一般在设置display为flex的子元素中设置，有三个参数，在这里不在详细解释，因为我也不太能组织语言解释它，可以百度查看一下该属性的使用方法。
利用以上属性你就可以实现示图中的效果了，源码下载。
网友评论