CSS3多列布局

1.背景

• 如果想要设计类似报纸那样的“多列布局”，有两种方式可以实现：一种是“浮动布局”、另一种是“定位布局”，但是这两种方式都有缺陷，“浮动布局”太过灵活，不好控制，“定位布局”可以精准定位，但是却不够灵活
• CSS3新增了一种布局方式——多列布局。使用“多列布局”可以轻松的完成类似报纸、下载壁纸那样的布局，而且“多列布局”的自适应能力也非常好

2.多列布局常用属性

• 列数：column-count
  • 我们可以使用column-count属性来定义多列布局的列数

auto	列数由column-width属性决定（默认值）
n（正整数）	自动划分为 n 列

• 列宽：column-width
  • 我们可以使用column-width属性来定义多列布局的每一列的宽度

auto	列数由column-count属性决定（默认值）
长度值	单位可以是px、em、rem、%等

• 间距：column-gap
  • 我们可以使用column-gap属性来定义多列布局的列与列之间的间距

normal

浏