本文介绍如何使用 css columns（多列布局）替代 flexbox，让连续文本内容自动在指定高度内按列流式排版，实现类似书籍的双栏效果，解决 flexbox 无法断行分栏的问题。
本文介绍如何使用 css columns（多列布局）替代 flexbox，让连续文本内容自动在指定高度内按列流式排版，实现类似书籍的双栏效果，解决 flexbox 无法断行分栏的问题。
Flexbox 的设计目标是一维布局控制（主轴/交叉轴），它将每个子元素（如 <div>）视为不可分割的弹性项，因此 <code>flex-flow: column wrap 只能在容器高度不足时将整个子元素整体换列，而不会对段落内部文本进行断行切分——这正是你遇到“整段跳到第二列”的根本原因。
要实现真正的“文本流式分栏”（即文字填满第一列后自动续到第二列，跨段落连续排版），应改用专为此场景设计的 CSS Multi-column Layout（多列布局）。其核心在于将容器视为一个连续的内容流，浏览器会自动将其中的文本内容（包括多个块级元素内的文字）按列高智能折行、分栏。
以下为推荐方案：
#texts {
column-count: 2; /* 设为双栏 */
column-fill: auto; /* 内容优先填满第一列再流向第二列（默认行为）*/
column-gap: 1em; /* 列间距 */
width: 300px;
height: 300px; /* 必须设置明确高度，否则列高无限，无法触发分栏 */
background-color: yellow;
font-size: 15px;
padding: 0.5em; /* 可选：增加内边距提升可读性 */
}
#texts > div {
text-indent: 1em; /* 段首缩进保持不变 */
margin: 0; /* 移除默认 margin，避免列间错位 */
break-inside: avoid; /* 可选：防止段落在列中被意外截断（提升阅读体验）*/
}✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
-
column-count定义栏数，height是触发分栏的必要条件（无高度则内容单列无限延伸）； -
column-fill: auto确保内容从上到下、从左到右自然流动（对比balance会尽量均衡列高，但可能破坏段落顺序）； -
break-inside: avoid能有效阻止浏览器在段落中间断开（如某段文字被拆到两列），增强可读性； - 所有
<div> 子元素的内容将被视作同一连续流处理，不再作为独立布局单元——这才是实现“文本级分栏”的前提。<p>⚠️ <strong>注意事项：</strong> </p> <ul><li>CSS Columns 对语义结构更敏感：若需保留段落语义，建议用 <code><p></p>替代<div>（语义更准确，且默认无 margin 冲突）； <li>不支持 <code>flex或grid的对齐属性（如justify-content），如需精确对齐，请结合text-align或column-rule等列专属属性； - 浏览器兼容性良好（Chrome 50+、Firefox 52+、Safari 10.1+、Edge 79+），移动端也完全支持。
通过切换至 CSS Columns，你无需修改 HTML 结构，仅靠纯 CSS 即可获得专业出版级的双栏排版效果——文本真正“像书一样”流动，而非“像卡片一样堆叠”。
