通过设置 flex: 1 0 auto 可使 Flex 项目在换行时自动占据剩余空间，同时避免单行时过度拉伸，无需依赖大数值的 flex-grow 或容器宽度约束。
通过设置 `flex: 1 0 auto` 可使 flex 项目在换行时自动占据剩余空间，同时避免单行时过度拉伸，无需依赖大数值的 `flex-grow` 或容器宽度约束。
在响应式 Flex 布局中，常遇到这样的需求：多个按钮或输入控件水平排列，当容器宽度不足导致最后一项被“挤”到下一行时，希望它能独占整行并自适应撑满剩余空间；而当所有项目仍在同一行时，它应保持原有尺寸、不抢占其他元素的空间。
传统做法（如 flex: 1000 1 0 配合 flex: 1）虽可临时生效，但存在明显缺陷：
- 依赖人为设定极大 flex-grow 值，语义不清且难以维护；
- 在媒体查询中动态禁用 flex-grow 时逻辑复杂、易出错；
- 容器宽度变化或项目数量增减时行为不可预测。
✅ 正确解法是利用 Flex 的弹性计算机制：
为所有相关子项统一设置 flex: 1 0 auto（即 flex-grow: 1; flex-shrink: 0; flex-basis: auto）。其原理在于：
- flex-basis: auto 使项目初始尺寸基于内容（如按钮文字宽度），而非固定值；
- flex-shrink: 0 确保项目在空间不足时不被压缩；
- flex-grow: 1 仅在存在剩余空间且无其他同级可伸缩项竞争时才生效——当最后一项单独成行，其父容器（该行）无其他兄弟项，因此它将自然撑满整行；而在单行布局中，因其他同级项也声明了 flex: 1 0 auto，它们会按内容宽度分配空间，不会触发异常拉伸。
示例代码（精简版，移除内联样式，改用类控制）：
<div class="input-group" style="display: flex; flex-wrap: wrap; gap: 4px;">
<div class="input-group-prepend" style="flex: 1 0 auto;">
<input type="text" placeholder="I am placeholder" class="form-control" />
</div>
<div class="input-group-append" style="flex: 1 0 auto;">
<button class="btn btn-dark">Search</button>
</div>
<div class="input-group-append" style="flex: 1 0 auto;">
<button class="btn btn-outline-danger">Unknown</button>
</div>
</div>⚠️ 注意事项：
- 必须确保所有参与布局的子项（包括“Unknown”按钮及其同级元素）统一应用 flex: 1 0 auto，不可混用不同 flex 值，否则破坏平衡逻辑；
- 若需限制最小宽度（如防止按钮过窄），可额外添加 min-width: 120px 等样式，不影响换行逻辑；
- Bootstrap 5+ 中 .input-group 默认为 display: flex，但若使用旧版本或自定义结构，请显式声明 display: flex 和 flex-wrap: wrap；
- 此方案完全基于 CSS，不依赖 JavaScript 或容器尺寸监听，兼容性良好（支持所有现代浏览器及 IE11+）。
总结：flex: 1 0 auto 是实现“换行后自动填满”的优雅方案——它尊重内容尺寸、规避硬编码、适配响应式场景，是现代 Flex 布局中值得牢记的核心技巧。
