如何使用CSS Flexbox实现表单在水平div中的响应式横向拉伸？

嘿，这事儿用Flexbox其实挺容易实现的，核心就是利用Flex布局的空间分配特性，让输入框自动占满剩余横向空间，按钮保持自身尺寸。下面是具体的实现方案：

核心思路 #

给表单容器开启Flex布局，让输入框通过flex: 1属性占据容器内除按钮外的所有可用空间，同时添加一些细节优化让表单在不同屏幕下都有好的表现。

完整代码示例 #

HTML部分（原结构无需大改） #

<div>
  <form class="sampleform" onSubmit={this.onSubmit}>
    <input type="text" class="input-text" name="sampleinput" placeholder="A placeholder ..." />
    <button type="submit" class="button">➕</button>
  </form>
</div>

CSS部分 #

/* 表单容器开启Flex布局 */
.sampleform {
  display: flex;
  gap: 8px; /* 输入框和按钮之间的间距，可按需调整 */
  width: 100%; /* 让表单占满父容器宽度 */
  max-width: 600px; /* 可选：限制最大宽度，避免大屏幕上表单过宽 */
  margin: 0 auto; /* 可选：让表单在父容器中居中 */
}

/* 输入框自动填充剩余空间 */
.input-text {
  flex: 1; /* 关键属性！占据容器剩余所有横向空间 */
  padding: 8px 12px; /* 优化输入体验的内边距 */
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px; /* 避免移动端输入时页面缩放 */
}

/* 按钮保持自身尺寸 */
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

/* 小屏幕适配（可选） */
@media (max-width: 480px) {
  .sampleform {
    gap: 6px;
  }
  .input-text, .button {
    padding: 6px 10px;
  }
}

关键属性解释 #

• display: flex：将表单转换为Flex容器，内部的input和button会成为Flex项目，自动排列在一行。
• flex: 1：给输入框设置这个属性后，它会自动填充容器中除按钮之外的所有可用横向空间，实现响应式拉伸效果。
• gap：用来控制两个元素之间的间距，比使用margin更可靠，不会出现外边距折叠的问题。
• font-size: 16px：给输入框和按钮设置这个值，可以避免移动端浏览器在输入时自动缩放页面的问题。

这样设置后，你的表单就会在不同屏幕尺寸下自动横向拉伸，输入框始终占满可用空间，按钮保持合适的大小啦～

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