如何用Flexbox让两个HTML输入框在容器空间不足时换行堆叠？

当然可以！完全不用依赖JavaScript，仅靠Flexbox的几个核心属性就能轻松实现这个需求。下面是具体的实现思路和代码：

核心思路 #

利用Flexbox的flex-wrap: wrap属性，当容器宽度不足以容纳两个输入框的最小宽度之和（60px+100px=160px）时，自动将输入框切换为垂直堆叠布局；同时通过flex属性控制输入框在空间充足时拉伸、空间不足时不小于各自的最小宽度。

完整代码实现 #

先保留你给出的HTML结构：

<div class="u-centerY u-fillRemaining">
  <div class="table-twoInputs">
    <input type="text" class="table-effort" placeholder="Effort" value="">
    <input type="text" id="row-1-position" value="$...">
  </div>
</div>

然后添加对应的CSS：

/* 父容器开启Flex布局，并允许换行 */
.table-twoInputs {
  display: flex;
  flex-wrap: wrap;
  /* 可选：给输入框之间添加间距，提升视觉效果 */
  gap: 8px;
}

/* 第一个输入框：最小宽度60px，空间充足时自动拉伸 */
.table-effort {
  flex: 1 1 60px;
  /* 注：flex的第三个参数已经指定了基准宽度，这里的min-width可以省略，写出来是为了更直观 */
  min-width: 60px;
}

/* 第二个输入框：最小宽度100px，空间充足时自动拉伸 */
#row-1-position {
  flex: 1 1 100px;
  min-width: 100px;
}

关键属性解释 #

• flex-wrap: wrap：这是实现自动换行的核心，当子元素的总基准宽度（这里就是各自的最小宽度）超过容器宽度时，Flexbox会将子元素换行排列。
• flex: 1 1 [min-width]：
  • 第一个1是flex-grow，允许输入框在容器有多余空间时自动拉伸，填满可用宽度；
  • 第二个1是flex-shrink，允许输入框在容器空间不足时收缩，但不会小于后面指定的基准宽度（也就是我们需要的最小宽度）；
  • 第三个值是flex-basis，指定了输入框的基准宽度，这里直接设为我们需要的最小宽度，确保输入框不会窄于这个值。

这样设置后，当容器宽度≥160px时，两个输入框会并排显示，各自尽可能拉伸以填充容器；当容器宽度<160px时，输入框会自动切换为垂直堆叠，每个输入框都会占满容器的宽度（同时保持自身最小宽度），完美符合你的需求。

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