CSS flex布局如何实现多div文本单行排列后自动换行不溢出

你的代码存在三个直接导致内容溢出、无法正常换行的核心问题：

• 错误配置white-space: nowrap：该属性会强制元素内所有文本、行内内容禁止换行，哪怕内容超出容器边界也不会折行
• Flex容器未开启换行能力：Flex布局默认flex-wrap属性值为nowrap，会强制所有子项挤压宽度排在同一行，总宽度超出容器时直接溢出
• 多余嵌套层无宽度约束：你额外添加的内层Flex容器没有设置宽度上限，会被内部内容撑开至实际内容宽度，根本不会触发宽度受限场景下的换行逻辑

以下两种方案都可以实现「内容从同一行开始排布、到达容器宽度自动换行、整体内容居中」的预期效果：

方案1：保留原有Flex布局结构 #

仅需修改3处样式即可：

1. 删除多余嵌套的内层Flex容器，把四个文本div直接放在带justify-content: center的父容器下
2. 给父Flex容器添加flex-wrap: wrap配置，允许子元素超出宽度时自动换行
3. 删除错误的white-space: nowrap属性，额外添加gap属性控制不同文本块之间的间距，避免文字贴在一起

最终可运行代码：

<html>
  <div style="width: 300px; border: solid 1px gray">
    <div style="width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 36px">  
        <div>This is a test</div>
        <div>This is another test</div>
        <div>This is a just another test</div>
        <div>This is the final test</div>
    </div>
  </div>
</html>

方案2：更轻量的行内元素实现 #

不需要依赖Flex布局，直接利用行内元素天然的排布规则实现，代码更简洁：

1. 父容器删除Flex相关属性，改用text-align: center实现内容居中
2. 所有文本子div设置display: inline转为行内元素，天然支持同行排布、超出自动换行，且元素之间默认保留文本间隔，不需要额外设置间距

最终可运行代码：

<html>
  <div style="width: 300px; border: solid 1px gray">
    <div style="width: 100%; text-align: center; min-height: 36px">  
        <div style="display: inline">This is a test</div>
        <div style="display: inline">This is another test</div>
        <div style="display: inline">This is a just another test</div>
        <div style="display: inline">This is the final test</div>
    </div>
  </div>
</html>

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