css column 多列布局

单羽童

已于 2025-03-22 06:23:22 修改

阅读量922

点赞数 26

分类专栏： css 文章标签： css 前端

于 2025-03-21 23:07:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54188159/article/details/146430393

版权

css 专栏收录该内容

1 篇文章

订阅专栏

column-* 相关的 CSS 属性用于 多列布局（CSS Multi-column Layout），它允许元素的内容在多个列中自动排布，类似于报纸或杂志的排版。以下是 column-* 系列属性的详细解释：

1. `column-count`

指定元素的内容应被分割成的列数。
浏览器会根据可用空间自动调整列宽。

示例：

p {
    column-count: 3; /* 分成3列 */
}

📝 效果： 段落文本会自动分成 3 列 显示。
在这里插入图片描述

2. `column-width`

指定每列的最小宽度，浏览器会根据容器的宽度自动决定实际列数。
适用于响应式布局。

示例：

p {
    column-width: 200px; /* 每列至少200px宽 */
}

📝 效果： 浏览器会根据容器宽度，尽可能多 地创建 200px 宽 的列。
在这里插入图片描述

3. `columns`（`column-count` 和 `column-width` 的简写）

可以同时设置列数和列宽，浏览器会根据两者来决定布局。

示例：

p {
    columns: 3 200px; /* 3列，每列至少200px宽 */
}

📝 效果： 如果容器足够宽，文本会被分成 3 列，每列宽度至少 200px。

4. `column-gap`

设置列之间的间距（默认为 normal，约 1em）。

示例：

p {
    column-count: 3;
    column-gap: 50px; /* 设置列间距为50px */
}

📝 效果： 每列之间的间距为 50px,类似于flex中的gap。

5. `column-rule`

设置列之间的分隔线，类似于 border。
需要指定 宽度、样式、颜色。

示例：

p {
    column-count: 3;
    column-rule: 1px dashed red; /* 1px虚线红色分隔线 */
    /*类似于border是column-rule-color，column-rule-width,column-rule-style的简写*/
}

📝 效果： 列与列之间会有 1px 宽 的 红色虚线。
在这里插入图片描述

6. `column-span`

指定某个元素是否跨列（适用于 div、h1 等块级元素）。
仅支持 all 和 none（默认值）。

示例：

h2 {
    column-span: all; /* h1 跨所有列*/
    /*如果不生效需要确保 column-span: all; 作用于 columns 父容器的子元素*/
}

📝 效果： h1 元素不会被分成多列，而是 跨列显示。
在这里插入图片描述

7. `column-fill`

控制内容如何填充列，常见值：
- balance：均匀分布内容，尽量让各列等高。
- auto（默认）：让第一列尽可能填满，再填充后面的列。

示例：

p {
    column-count: 3;
    column-fill: balance; /* 让所有列尽可能等高 */
}

📝 效果： 内容会尽量分布得均匀。
在这里插入图片描述

`column-fill` 的详细解析

column-fill 主要用于 多列布局（multi-column layout），控制文本内容如何填充到各个列中。
重点在于：它只对固定高度的容器有效！（即 height 已经设定的情况下）

1. `column-fill: auto;`（默认）

效果：

第一列优先填充，直到放不下，再填充下一列。
可能导致列高度不均匀，第一列比其他列高很多。

结果

第一列会尽量填满，如果剩余空间不足，才会换到下一列。
列的高度可能不均匀，右侧列可能会比左侧列短。

2. `column-fill: balance;`（均衡填充）

效果：

尽量让所有列的高度一致，即使第一列还可以填更多内容，也会平均分配到所有列。
适用于杂志、新闻排版等需要对齐的布局。

结果

所有列的高度尽量相等，不管内容多少，都会分布到三列中。
可能导致某些列内容被强制拆分，影响阅读流畅度。

`column-fill` 的适用场景

`column-fill` 值	适用场景	列高均匀？
`auto`（默认）	文章内容，长文本流式填充	不均匀
`balance`	新闻、杂志等排版	均匀分布

总结

如果不设定 height，column-fill 根本不会生效！
column-fill: auto; → 优先填充左侧列，可能导致列高度不均匀。
column-fill: balance; → 让所有列尽量等高，适合对齐排版。

如果你的代码 `column-fill: balance;` 没有效果，检查：

容器是否有 height 限制？（height 必须固定，才能生效）
是否有足够多的内容？（如果内容本身不够填充多列，效果不明显）
需要注意这个属性是设置给父容器而不是子元素而column-span恰恰相反

总结

属性	作用	例子
`column-count`	指定列数	`column-count: 3;`
`column-width`	指定最小列宽	`column-width: 200px;`
`columns`	`column-count` 和 `column-width` 的简写	`columns: 3 200px;`
`column-gap`	设置列间距	`column-gap: 50px;`
`column-rule`	设置列间的分隔线	`column-rule: 2px solid black;`
`column-span`	控制元素是否跨列	`column-span: all;`
`column-fill`	控制列内容填充方式	`column-fill: balance;`

应用场景

报纸或杂志风格的文本布局
产品列表、菜单、博客内容
提高可读性，让长文本更紧凑

你可以试试这个代码来感受 column-* 的效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            column-count: 3;
            column-gap: 40px;
            column-width: 200px;
            column-rule: 1px dashed red;
            height: 700px;
            column-fill: auto;
        }
        h1 {
            column-span: all;
        }
    </style>
</head>

<body>
    <div>
        <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa corporis laudantium atque odit facere, nisi
            reprehenderit sed earum quidem? A et voluptate nostrum eos sapiente exercitationem maiores at sunt harum.
        </h1>
        <p>用组件,适合Flutter新手，也可帮助有一定经验的开发者查漏补遗。,进阶篇：Flutter进阶组件,介绍更多与布局、动画、导航、人机交互、弹窗等功能相关的组件,帮助读者进一步提升Flutter开发能力。,扩展篇：Flutter高级组件,重点介绍如Sliver机制、高效渲染、打破约束、自定义布局等难点,适合有一定Flutter开发经验的读者深入学习。,第1章
            基础布局,Flutter组件概述,组件是Flutter框架的基石，通过定义一个个相对独立的小组件，再利用组件与组件之间的嵌套与配合，逐步搭建出复杂的用户界面,Flutter框架自带了大量的组件，其中大部分组件主要负责渲染用户界面，例如文本框或图片等，也有一部分组件负责处理人机交互，例如触摸事件监听或识别拖放操作等，还有一些功能性组件，例如媒体查询组件等，可以获得当前设备的尺寸及屏幕亮度等信息。,组件不可变，即一旦被创建就不可以再修改其中的内容，但通常一个应用程序在运行时会有不少动态内容需要随时改变,每当程序内部数据发生改变或因动画效果而导致用户界面需要更新时，所有涉及的组件都会被摧毁并重制。,FlutterLogo组件,FlutterLogo组件，顾名思义，是一个专门用于渲染Flutter徽标的组件,FlutterLogo组件的使用方法比较简单，代码如下：FlutterLogo(
            size: 100, style: FlutterLogoStyle. stacked,
            )。,FlutterLogo组件的尺寸由size属性设置，默认值为24.0，单位是逻辑像素,Flutter框架中的尺寸或位置信息，例如高度、宽度等，一般都以逻辑像素作为单位。,徽标样式可由style属性设置，即是否需要在徽标附近插入Flutter文字，以及文字的显示位置,这里的默认值是FlutterLogoStyle.
            markOnly，即只显示徽标，不显示文字。其他可选值为FlutterLogoStyle. horizontal和FlutterLogoStyle.
            stacked，分别将文字显示在徽标的右边和下边。,FlutterLogo组件的color和textColor属性，徽标的颜色由color属性设置，默认为蓝色,若前面通过style属性选择了需要显示Flutter文字，则还可以再借助textColor属性修改文字的颜色。
        </p>
    </div>


</body>

</html>