含文本与输入控件的Flexbox行如何实现文本自动换行并对齐内联流？

要实现文本占用可用空间自动换行，同时让Flex容器保持正常内联流对齐，还保留垂直对齐和gap的特性，直接按下面的方法来就行：

代码实现 #

HTML结构 #

<div class="flex-row">
  <span class="text-wrap">这是一段需要自动换行的长文本，当容器空间不足时，文本会自动折行，不会把旁边的输入框挤得变形或者溢出容器</span>
  <input type="text" placeholder="输入内容">
</div>

CSS样式 #

.flex-row {
  display: inline-flex; /* 让Flex容器跟正常内联元素一样对齐 */
  align-items: center; /* 实现文本和输入框垂直居中 */
  gap: 10px; /* 用gap设置元素间的间距，比margin更省心 */
  /* 可给容器加最大宽度，或放在有宽度限制的父元素里，触发换行 */
  max-width: 350px;
}

.text-wrap {
  flex: 1; /* 让文本容器占满剩余可用空间 */
  min-width: 0; /* 打破Flex子元素的最小宽度限制，允许文本换行 */
  word-break: break-all; /* 确保长文本/长单词都能正常换行 */
}

重点说明 #

• inline-flex：这是让Flex容器保持内联流对齐的核心，不像默认flex是块级元素占满整行，inline-flex会跟周边内联元素正常排列。
• flex: 1：给文本容器分配剩余空间，输入框仅占用自身所需宽度，保证文本能拿到足够的换行空间。
• min-width: 0：默认Flex子元素的最小宽度等于内容本身宽度，不加这个属性的话，文本会一直撑着容器不换行，加上后容器可被压缩，文本就会自动折行。
• align-items: center：直接实现文本和输入框的垂直对齐，满足需求里的垂直对齐要求。
• gap：直接设置元素间的间距，无需手动调整margin，逻辑更清晰可控。

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