# CSS columns多列布局 实现瀑布流布局效果

> CSS columns多列布局规范经常被忽略，我们可以通过CSS columns实现类似报纸上的文本内容排版一般亦或瀑布流排版布局。

Author: DeathGhost
Published: 2019-05-26 23:37:30
Category: css
Canonical: https://www.deathghost.cn/article/css/48
Keywords: CSS, columns, 布局, 多列布局, 分栏布局, 排版, 瀑布流, 报纸排版, 图文排版, break-inside

我们通常使用CSS Grid Layout和Flexbox等布局方式的情况下，经常忽略另一种布局方法 - “CSS Columns”。

这篇文章N年前写过，由于迁站加之当时博客内容涉及杂乱，数据也就丢弃了?。

我们对于新码首先想到的是在什么场景去使用，如何使用，是否简化。下面我们看看CSS中这个多列布局方式。

## 运用场景：内容块实现多列划分或瀑布流的方式排版布局。

也就是将一整块文本通过column-count和column-width对其进行分列或分栏实现排版布局效果。

最为常见的就是网站上的图文以"瀑布流"的方式排版。

![CSS COLUMNS](https://www.deathghost.cn/public/upload/article/2019/05/1558886001361.jpg)

CSS COLUMNS 多列布局

使用方法也比较简单，我们在父容器设置column-count: <number>属性即可实现其效果。

column-count // 列数
column-gap // 列间距
break-inside // 列或区块发生中断时候的表现
/**更多属性查看其他文档*/
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

## 效果示例

  See the Pen [CSS columns分栏布局 实现瀑布流布局效果](https://codepen.io/deathghost/pen/vwjvZO/) by 孙志锋
  ([@deathghost](https://codepen.io/deathghost)) on [CodePen](https://codepen.io).

示例一个图文布局片段：

<article>
    <h1>CSS column</h1>
    <div class="list">
        <figure>
            <figcaption>大雁塔</figcaption>
            <img src="9a5-481a-a431-1a0aac731a60.jpg"/>
            <p>大雁塔位于唐长安城晋昌坊（今陕西省西安市南）的大慈恩寺内，又名&ldquo;慈恩寺塔&rdquo;。唐永徽三年（652年），玄奘为保存由天竺经丝绸之路带回长安的经卷佛像主持修建了大雁塔，最初五层，后加盖至九层，再后层数和高度又有数次变更，最后固定为今天所看到的七层塔身，通高64.517米，底层边长25.5米。</p>
        </figure>
        <figure>
            <figcaption>兵马俑</figcaption>
            <img src="9a5-481a-a431-1a0aac731a6c.jpg"/>
            <p>兵马俑，即秦始皇兵马俑，亦简称秦兵马俑或秦俑，第一批全国重点文物保护单位，第一批中国世界遗产，位于今陕西省西安市临潼区秦始皇陵以东1.5千米处的兵马俑坑内。</p>
        </figure>
        <figure>
            <figcaption>西岳华山</figcaption>
            <img src="4bed2e738bd4b31c794ab3ed85d6277f9e2ff876.jpg"/>
            <p>中国著名的五岳之一，中华文明的发祥地，&ldquo;中华&rdquo;和&ldquo;华夏&rdquo;之&ldquo;华&rdquo;，就源于华山。</p>
        </figure>
        <figure>
            <figcaption>广仁寺</figcaption>
            <img src="178a82b901875ad89a7b8da9773812efa0.jpg"/>
            <p>西安广仁寺位于西安明城墙内西北角，为中国唯一绿度母主道场，也是陕西地区唯一的一座藏传格鲁派寺院，是清康熙四十四年（1705年），玄烨皇帝来陕西巡视时，拨专款敕建。</p>
        </figure>
    </div>
</article>
.list{
    width:980px;
    margin:0 auto;
    column-count: 3;
    column-gap: 5vw;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.list figure{
    height:100%;
    margin:0;
    overflow: auto;
}
.list figure img{
    width: auto;
    max-width: 100%;
    height:auto;
}
.list p{font-size: 12px;color:#999;}
这样就实现了其布局效果，里面需要注意的两点，不然图文排列区块中会出现中断（断裂,截断）效果。

page-break-inside: avoid;
break-inside: avoid;
若不设置，则会终端区块，同时还有page-break-inside处理火狐浏览器下被截断。

还有一处就是我们如果设置了子元素为分列块及其效果渲染，就需要对其元素设置样式如下，否则也会被错位截断。

height:100%;
overflow: auto;
好了，就到这里，更多的属性查看文档，晚安?！

## Related

- Previous: [CSS 省略文本字符串开头与结尾 无聊的小测试](https://www.deathghost.cn/article/css/45)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)