本文详解如何使用 css flexbox 将两个按钮精准置于输入框正下方——一个左对齐输入框起始边缘，一个右对齐输入框末端边缘，无需绝对定位或冗余包裹，兼顾语义性与响应式健壮性。
本文详解如何使用 css flexbox 将两个按钮精准置于输入框正下方——一个左对齐输入框起始边缘，一个右对齐输入框末端边缘，无需绝对定位或冗余包裹，兼顾语义性与响应式健壮性。
在构建表单交互区域（如单词游戏中的输入+操作按钮组）时，常见需求是：输入框独占一行，其下方紧邻两个功能按钮，分别与输入框的左、右边界严格对齐。初学者常误用 flex-direction: column 配合 align-items: center，但这会导致所有子元素居中堆叠，无法实现“按钮各自锚定输入框边缘”的效果。
正确解法在于将 .input_container 设为 水平主轴布局（flex-direction: row 默认值），并利用 justify-content: space-between 与 flex-wrap: wrap 协同控制流式换行与空间分配：
- display: flex 启用弹性布局；
- flex-wrap: wrap 允许子元素在空间不足时换行（关键！使输入框独占一行，按钮自动折到下一行）；
- justify-content: space-between 在同一行内将首尾元素推至容器两端；当输入框单独一行、两个按钮在下一行时，该属性配合 width: 100% 的输入框，能自然驱动按钮分别贴靠父容器左右边界——而由于输入框宽度为 100%，其视觉左右边缘即等同于父容器左右边缘。
以下是优化后的核心 CSS 片段：
.input_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.input_container input {
width: 100%; /* 输入框撑满整行 */
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px; /* 为按钮留出垂直间距 */
}
.btn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
⚠️ 注意事项：
- 移除原代码中 .btn#submit_btn { margin-right: auto } 和 .btn#get_letter_btn { margin-left: auto } ——它们在 space-between 布局下不仅无效，还可能干扰对齐逻辑；
- 确保 HTML 结构保持语义清晰： 在前，两个
- 若需增强移动端适配，可为 .input_container 添加 max-width 或配合媒体查询调整 gap，但本方案默认具备良好响应性。
此方法简洁、标准、无 hack，兼容所有现代浏览器，是实现「输入框下方左右对齐双按钮」的专业级 Flexbox 实践。
