如何让flex容器内文本填满首列后再拆分至第二列？

你当前用flex的column wrap布局，会导致整段文本在首列空间不足时直接跳转到第二列，无法拆分段落填充剩余空间。这是因为flex布局是基于**整元素（flex item）**来排列的，每个<div>作为独立item，不会被拆分。

要实现类似书籍的自动分栏（段落内容可跨列拆分），应该使用CSS的多列布局（Multi-column Layout），替代flex方案：

修改后的代码 #

CSS #

#texts{
    width: 300px;
    min-height: 300px;
    max-height: 300px;
    background-color: yellow;
    font-size: 15px;
    /* 核心：设置为2列，每列宽度自动均分容器 */
    columns: 2;
    /* 可选：调整列之间的间距 */
    column-gap: 0;
}

#texts > div{
    text-indent: 1em;
    /* 移除原本的width:50%，让文本自动填充列宽 */
    margin: 0 0 0.5em 0;
}

HTML #

<div id="texts">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit... blah blah paragraph 1</div>
    <div>This is paragraph 2.. very interesting. I am filler text.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>More filler text here. Paragraph 4. Hopefully I've wrapped accordingly. Who knows?</div>
    <div>Another paragraph here</div>
</div>

关键说明 #

• columns: 2 直接将容器内容分为2列，浏览器会自动计算每列宽度（容器宽300px，所以每列150px），并自动拆分文本填充剩余空间。
• 移除子元素的width:50%，让文本自然适配列宽；添加margin可以保持段落之间的间距，更接近书籍排版。
• 如果需要更精确控制列宽，可以用column-width: 150px替代columns:2，效果一致。

内容的提问来源于stack exchange，提问作者Letti42