css3 -> 多栏布局

在进行多栏布局时。使用bootstrap的栅格系统能够非常轻松的实现效果，事实上css3本身也提供了多兰布局的功能。

比方，我们在一个section标签内填充了非常多内容。同一时候希望内容可以显示成三列，那么可以通过例如以下css来实现（使用chrome浏览器）。

设置分栏的数量

section {
  -webkit-column-count: 3;
}

依据宽度分栏

section {
  -webkit-column-width: 25rem;
}

当中rem与em不同，它所表示的字体大小是相对于全局的。

假设可以在分栏空隙中显示一些标记，页面会显得更加美观，它的实现也很easy。

定义分栏间隙

section {
  -webkit-column-width: 25rem;
  -webkit-column-rule: 3px solid #8B2101;
  -webkit-column-gap: 2rem;

当中column-rule能够拆分成例如以下规则:

• column-rule-width: 3px;
• column-rule-style: solid;
• column-rule-color: #8B2101;

假设不定义分栏的高度。内容会被平均分配，可是假设指定了高度。还能够运行分栏的填充方式。

分栏内容的填充方式

section {
  column-width: 20rem;
  column-rule: 3px solid #8B2101;
  column-gap: 2rem;
  height: 85rem;
  column-fill: balance;
}

column-fill的值除了balance,还有还有一个值auto

怎样跨栏

在表格中我们能够使用colspan=2来配置内容扩展的列数。当然分栏内容也能够通过例如以下方式来实现。

section img { 
  column-span: all; 
  margin: 1rem auto;
}

其他特性

告诉浏览器你想要在哪里開始分栏。

break-before

auto\always\avoid\column\avoid-column

break-after

auto\always\avoid\column\avoid-column

break-inside

auto\always\avoid\column\avoid-column

參考

《CSS实战 开发与设计》