如何让Flex项目呈现流式文本效果？兼顾动态元素移除需求

默认Flex布局里，每个子元素作为独立的flex item，哪怕内容换行也会占满容器整行宽度，导致后面的短元素只能另起一行。要让子元素像普通流式文本一样排列（比如短元素能跟在长文本换行后的末尾），同时保留通过类动态移除子元素的能力，可以按以下方式修改代码：

修改后的CSS代码 #

.container{
  display: flex;
  flex-wrap: wrap;
  max-width: 200px;
  background: red;
  padding: 6px; /* 添内边距提升可读性 */
  gap: 4px; /* 子元素间添加间距 */
}

.container > div{
  word-break: break-word;
  background: blue;
  color: white;
  font-weight: 600;
  flex: 0 1 auto; /* 核心：不放大、允许缩小，基准宽度适配内容 */
  width: fit-content; /* 让宽度随内容自适应，支持换行且不强制占满整行 */
}

/* 用于动态移除子元素的类 */
.hidden {
  display: none;
}

修改后的HTML示例（含动态移除演示） #

<div class="container">
  <div>Looooooooooooooooooong text looooooooong</div>
  <div>Smooll</div>
  <div class="hidden">Smoll（已隐藏）</div>
</div>

关键说明 #

• flex: 0 1 auto：确保子元素不会强行拉伸占据剩余空间，同时在容器宽度不足时允许缩小，避免溢出
• width: fit-content：让子元素宽度自适应内容，当内容过长时自动换行，且不会强制占满整行，留出空间给后续子元素实现流式排列
• .hidden 类：直接添加到任意子元素即可隐藏（动态移除），完全兼容Flex布局的特性

内容的提问来源于stack exchange，提问作者Laczkó Örs