多栏布局是CSS3新增布局中的一种,尽管它很低调。
一、明确结构
多栏布局的结构很简单,主要由multi-column container和column box组成。
当一个元素设置了column-width和column-count属性并且值不为auto,那么这个元素就是multi-column container。
multi-column container内部通过多个column box来展示内容。
二、了解基本用法
1、column-count和column-width
通过这两个属性,我们可以控制分栏的数目,但是相比较count属性,width属性就显得很灵活。
当设置width属性之后,并不是说分栏的宽度就是这个固定的值,它还会结合分栏布局容器中的宽度灵活的多增少减。
2、column-rule和column-gap
这两个属性主要帮助我们设置分栏之间的间隙以及分栏的样式,还是比较好理解的:
这里你可以将column-rule的宽度设置的大一些,会有惊奇的发现哦。
3、column-span
这个属性