DeathGhost

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

这篇文章发布于 2019年05月26日 23:37 星期日 阅读 729 次,评论 0 条

DeathGhost 编辑,归类于css »

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

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

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

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

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

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

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

CSS COLUMNS
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

效果示例:

示例一个图文布局片段:

<article>
    <h1>CSS column</h1>
    <div class="list">
        <figure>
            <figcaption>大雁塔</figcaption>
            <img src="9a5-481a-a431-1a0aac731a60.jpg"/>
            <p>大雁塔位于唐长安城晋昌坊(今陕西省西安市南)的大慈恩寺内,又名“慈恩寺塔”。唐永徽三年(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>中国著名的五岳之一,中华文明的发祥地,“中华”和“华夏”之“华”,就源于华山。</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;

好了,就到这里,更多的属性查看文档,晚安🌙!

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

33

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕