本文介绍如何用 column-count 替代 Flexbox 实现真正的文本流式分栏，让长段落内容自动在左右两栏间断行填充，而非整块元素换列。
本文介绍如何用 `column-count` 替代 flexbox 实现真正的文本流式分栏，让长段落内容自动在左右两栏间断行填充，而非整块元素换列。
Flexbox 的 flex-flow: column wrap 本质是容器内子元素按列顺序堆叠并换列，它不会拆分单个子元素的内容——也就是说，每个 <div> 段落始终作为一个不可分割的整体，要么完整显示在第一列，要么整体移至第二列。这正是你遇到的问题：段落无法“断开”以填满第一列剩余空间。<p>要实现类似印刷书籍的自然双栏排版（即文字流连续、跨栏断行），应改用 <strong>CSS Multi-column Layout（多列布局）</strong>，它专为文本流分栏设计，支持内容在列间自动平衡与断行。</p>
<p>✅ 正确做法：启用 <code>column-count 并移除 Flexbox 布局
以下是最简可靠配置：
#texts {
column-count: 2; /* 明确分为两栏 */
column-fill: auto; /* 内容优先均匀填充（非强制等高）*/
column-gap: 1em; /* 栏间距，替代 margin/padding 的冗余设置 */
width: 300px;
height: 300px; /* 必须设定明确高度或 max-height，否则列数可能失效 */
background-color: yellow;
font-size: 15px;
line-height: 1.5; /* 推荐添加，提升可读性 */
}
#texts > div {
text-indent: 1em; /* 段首缩进仍生效 */
break-inside: avoid; /* 关键！防止段落被强行断在两栏之间 */
}? 注意事项：
-
height或max-height是必需的：多列布局依赖容器高度来计算列高，若高度不固定（如min-height单独存在），浏览器可能忽略分栏或行为异常； -
break-inside: avoid防止段落被截断：确保每个<div> 作为逻辑段落整体保留在同一栏内（这是语义化排版的基本要求）； <li> <strong>避免对子元素设置 <code>width: 50%：多列布局中子元素默认宽度为 100% 容器宽，其内容会自动流入各列，显式设宽反而破坏流式行为； - 兼容性良好：现代浏览器（Chrome 50+、Firefox 52+、Safari 10.1+、Edge 79+）均原生支持，无需前缀。
? 进阶提示：如需更精细控制（如首栏略宽、响应式单/双栏切换），可结合 @media 查询或 column-width（基于最小列宽自适应列数）使用。但对确定双栏场景，column-count: 2 是最简洁、语义最清晰的选择。
立即学习“前端免费学习笔记（深入）”；
总之，当目标是「文本内容跨栏流动」时，请选择 CSS Columns；而 Flexbox 更适合「可控的 UI 组件排列」。理解二者的设计意图，是写出健壮布局代码的关键。
