前提
在介绍布局排版之前，我们首先引入一个尺寸单位，这个尺寸单位是在 CSS3 中新引入的，它就是 rem ，所有引用 rem 定义的字体大小都是相对于根元素 文本的大小，相对于使用 em，这种方式将我们从手动计算字体大小的繁琐过程中解脱出来。
效果一
demo01.png
只要利用 CSS3 提供给我们的新属性，我们可以很轻易的做出这么一个效果。下面我们针对用到的几个主要属性进行讲解。
立即学习“前端免费学习笔记（深入）”；
column-width : 用于指定列的宽度，一旦指定一个值，浏览器会根据当前浏览器的宽度，动态的决定将内容分为多少列。
column-rule : 这个属性是一种简写，其实它包含了三个不同的属性，分别是 column-rule-width, column-rule-style, column-rule-color，反正实现的就是在列之间加上一个分割线，和 border 属性的设置是相同的。
column-gap : 用于设置分栏的空隙属性，这个值由分栏两侧平摊。
如果想要实现分栏，我们可以利用 column-width ，也可以使用 column-count 属性，但是我们通常不这么做，因为这意味着必须要将内容分成三列，而不考虑当前浏览器的宽度，这是非常不友好的设计。
知道了以上属性之后，相信你可以很快的将我们示图中的效果实现出来，这里我们不在粘贴源代码，你可以 点此下载 。这里需要将一下，我们在页面中引用了一些好看的字体，如果你也想使用，你住需要将下面这一行代码粘贴到你的 标签下即可。
效果二
demo02.png
这个效果我们使利用 Flexbox 实现的，下面针对用到的几个属性进行讲解。
display : 如果想要使用 Flexbox 布局，那么我们首先要将这个属性的值设置为 flex。
flex-flow : 这个属性其实是两个属性的缩写，其中一个是 flex-direction 用于设置主轴的方向，如果设置为 row 则是一水平方向为主轴，如果为 column 垂直方向为主轴。还有一个属性是 flex-wrap， 用于设置元素换行，当元素超出父元素宽度时就自动换行，这就可以实现自适应屏幕的效果。
flex : 这个属性一般在设置 display 为 flex 的子元素中设置，有三个参数，在这里不在详细解释，因为我也不太能组织语言解释它，可以百度查看一下该属性的使用方法。
