column-count 实现报纸式多栏排版：设 column-count 控制栏数，配合 column-gap、column-rule、break-inside: avoid、hyphens: auto 等提升可读性，用媒体查询响应式调整，并注意兼容性与浮动/高度限制等陷阱。
用 column-count 实现报纸式多栏排版，核心就一条：给文字容器设好栏数，浏览器自动分栏、平衡内容、处理断行——无需手动切分段落或写 JS。
基础用法：指定栏数，让文字自动流动
只需在包裹文字的块级元素（如 div、article）上设置 column-count，浏览器就会把内容按列均匀分布：
-
column-count: 3;→ 强制分成 3 栏（实际栏数可能受宽度限制而减少） - 搭配
column-gap控制栏间距（默认 1em，建议设为 1.5rem 或 24px 更舒适） - 用
column-rule可加竖线分隔，例如column-rule: 1px solid #e0e0e0;
避免生硬断行：控制分页与断字行为
默认情况下，浏览器可能在不恰当的位置断行或跨栏换行。通过以下属性提升可读性：
-
break-inside: avoid;加在子元素（如h2、p）上，防止标题或段落被拆到两栏 -
hyphens: auto;启用连字符（需配合lang属性和字体支持，中文暂不生效，但对英文很实用） -
orphans: 3;和widows: 3;确保段落首尾至少保留 3 行，避免孤行
响应式适配：随屏幕宽度动态调整栏数
固定栏数在小屏上会挤成细条。推荐用媒体查询渐进增强：
- 移动端（≤768px）：
column-count: 1;（单栏，最易阅读） - 平板（769–1024px）：
column-count: 2; - 桌面端（≥1025px）：
column-count: 3;或4; - 也可结合
column-width（如column-width: 180px;），让浏览器根据容器宽度“尽可能”达到该宽度，再决定栏数
注意兼容性与常见陷阱
现代浏览器（Chrome、Firefox、Safari、Edge）均支持 column-count，但仍有细节需留意：
- IE10+ 支持，但 IE11 不支持
break-inside: avoid;，可用page-break-inside: avoid;作降级 - 浮动元素、绝对定位元素会脱离分栏流，可能重叠或错位，慎用
- 高度受限容器（如设了
height）可能导致末尾内容被截断，优先用min-height或不限高 - 表格、
iframe等替换元素在分栏中表现不稳定，建议外层包裹div并设break-inside: avoid;
不复杂但容易忽略：多栏本质是视觉布局层的变化，语义结构完全不变——对 SEO、屏幕阅读器都友好，是真正兼顾美观与可访问性的排版方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
