本文详解如何通过 css flexbox 将两个按钮精准定位在输入框正下方——一个左对齐输入框左侧，另一个右对齐输入框右侧，避免传统浮动或绝对定位带来的维护难题。
本文详解如何通过 css flexbox 将两个按钮精准定位在输入框正下方——一个左对齐输入框左侧，另一个右对齐输入框右侧，避免传统浮动或绝对定位带来的维护难题。
要实现“输入框下方、按钮分别贴合其左右边缘”的布局，关键在于放弃 flex-direction: column 的垂直堆叠思路，转而采用水平弹性容器 + 换行 + 空间分布策略。
核心原理是：将 .input_container 设为 display: flex，移除 flex-direction: column，启用 flex-wrap: wrap 允许子元素换行，并用 justify-content: space-between 让第一行（仅输入框）独占整行，第二行的两个按钮自动被推至容器两端——但前提是它们处于同一 flex 行。然而，由于输入框设为 width: 100%，它会独占一行，按钮自然换到下一行；此时若仅靠 space-between，按钮会撑满整行宽度，无法对齐输入框边界。
✅ 正确解法是：让输入框、左按钮、右按钮同处一个 flex 容器，但通过设置按钮的 margin-left: auto 和 margin-right: auto 配合容器 justify-content: space-between，并确保按钮不换行——但更稳健且语义清晰的做法是：保留输入框独占一行，再为按钮单独创建一个内联 flex 容器，宽度与输入框一致，并应用 justify-content: space-between。
不过，原答案提供的方案虽能工作，但存在冗余（如 align-items: center 对换行后按钮无实质影响）且未明确约束按钮容器宽度。推荐以下优化实现：
.input_container {
display: flex;
flex-direction: column;
gap: 10px; /* 替代 margin-bottom，更可控 */
}
.input_container input {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
/* 新增：按钮专用容器，宽度与 input 一致 */
.input_container .btn-group {
display: flex;
justify-content: space-between;
width: 100%; /* 关键：与 input 同宽 */
}
.btn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #4CAF50;
color: white;
}
.btn#submit_btn {
background-color: #2196F3;
}
.btn#get_letter_btn {
background-color: #FF9800;
}
对应 HTML 调整为：
<div class="input_container">
<input type="text" id="word_input" placeholder="Enter your word"><div class="btn-group">
<button class="btn" id="submit_btn">Submit</button>
<button class="btn" id="get_letter_btn">Get Letter</button>
</div>
</div>
? 注意事项：
- width: 100% 在 .btn-group 上至关重要，否则 justify-content: space-between 会在整个父容器宽度上分配空间，导致按钮超出输入框范围；
- 使用 gap 替代 margin-bottom 可避免父子 margin 合并问题，提升布局稳定性；
- 避免给按钮单独设置 margin-left/right: auto，这在 flex 容器中易与 justify-content 冲突；
- 响应式场景下，可为小屏幕添加 flex-direction: column 和 width: 100% 的媒体查询，确保按钮纵向堆叠。
该方案语义清晰、兼容性好（支持所有现代浏览器及 IE11+），且易于扩展（例如增加第三个按钮时只需调整 justify-content 或使用 flex: 1 分配权重）。
