HTML/CSS表单组件开发：实现中间元素自动适配剩余宽度

API 探路者

2026-5-25

用Flexbox实现表单组件的自适应布局

嘿，这个需求简直是Flexbox的拿手好戏！我之前做过类似的表单组件，刚好可以给你一套完整的解决方案：

核心思路

我们需要一个横向容器，让左侧的标签/文本、右侧的按钮保持自身宽度，中间元素自动填充两者之间的剩余空间。Flexbox的flex属性可以轻松搞定这个空间分配逻辑。

完整代码示例

<!-- HTML结构 -->
<div class="form-row">
  <span class="form-left">用户名</span>
  <input type="text" class="form-middle" placeholder="请输入用户名">
  <button class="form-right">保存</button>
</div>

/* CSS样式 */
.form-row {
  /* 开启Flex布局 */
  display: flex;
  /* 让元素垂直居中对齐，优化视觉体验 */
  align-items: center;
  /* 给元素之间添加间距，避免挤在一起 */
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.form-left {
  /* 禁止左侧元素被压缩，保持自身宽度 */
  flex-shrink: 0;
  /* 可选：设置最小宽度，避免不同文本长度导致布局跳动 */
  min-width: 80px;
  font-weight: 500;
}

.form-middle {
  /* 自动填充剩余空间：允许放大、允许缩小、基准宽度为0 */
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* 确保元素填满分配到的空间 */
  width: 100%;
  box-sizing: border-box;
}

.form-right {
  /* 禁止右侧按钮被压缩，保持自身宽度 */
  flex-shrink: 0;
  padding: 6px 18px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}