本文聚焦前端表单布局中一个极为常见的场景：在文本域下方放置两个按钮——一个“清除”，一个“提交”，要求它们并排显示、等宽对齐且紧贴底部，整体视觉整洁稳固。听起来简单，但实际编写时，不少开发者容易陷入 position: absolute 或多层 relative 的复杂思路，结果导致布局脱离文档流、响应式失效，后期维护也变得棘手。
事实上，有一种非常干净的解决方案：仅使用 Flexbox 即可完美实现，无需任何花哨技巧。
HTML 结构如下：
结构层级非常清晰：外层父容器包裹 textarea 和按钮区，按钮区再嵌套两个按钮。看似简单，但 CSS 中 width: min-content 的运用才是布局稳定的关键核心。
对应的样式：
.comment-area {
width: min-content;
margin: 0 auto;
}
textarea {
width: 300px;
height: 100px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
.button-area {
display: flex;
gap: 4px;
margin-top: 8px;
}
.button-area > * {
flex: 1;
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
这里有几点值得重点说明：
关键要点说明
width: min-content是核心关键——它让父容器 .comment-area 的宽度由内部最宽的子元素决定，本例中最宽元素正是 textarea 本身。这样一来，按钮区域不会被父容器宽度撑开，也不会出现按钮异常拉宽或间距失调的问题。如果去掉这一行，按钮区域宽度可能直接等于父容器宽度，导致按钮比例失调。flex: 1的等分能力远超width: 50%——因为还需要考虑内边距和边框的叠加，使用 50% 很容易在无意中造成溢出，而flex: 1让浏览器自动分配剩余空间，既省心又健壮。gap比手写 margin 更简洁——按钮之间的统一间距无需再处理首尾多余的 margin，一行代码即可搞定。- 兼容性方面，Chrome 84、Firefox 63、Safari 14.1 及以上版本均可良好支持。如需兼容更老的环境，可以用 margin 替代 gap，并对
flex-basis做适当微调。
注意事项
- 如果父容器需要填满外层宽度，应将
width: min-content改为width: 100%，同时将 textarea 的宽度也改为width: 100%，按钮的flex: 1仍然能保持等宽效果。 - 建议为每个按钮添加
type属性（button 或 submit），避免在表单中意外触发提交行为——这是一个能有效防止大问题的小习惯。 - 移动端场景下，可以利用
@media将按钮区改为flex-direction: column，使按钮上下堆叠，提升小屏幕上的触控友好性。
整体来看，该方案的优点在于轻量、直观、易维护，且无需依赖任何后处理器或框架，纯原生 CSS 即可实现。对于“多按钮对齐”这类常见需求，它无疑是一个非常值得收入工具箱的实用解法。
