本文讲解如何通过 css flexbox 将多个带边框的容器（如按钮组）从默认的垂直堆叠改为水平并排显示，并提供可直接运行的代码示例与关键注意事项。
本文讲解如何通过 css flexbox 将多个带边框的容器（如按钮组）从默认的垂直堆叠改为水平并排显示，并提供可直接运行的代码示例与关键注意事项。
在网页开发中，HTML 元素默认按文档流垂直排列（块级元素独占一行），因此你定义的 .border 和 .border-2 两个容器会自然上下堆叠。即使尝试 float 或调整 margin，也容易因清除浮动、父容器塌陷或 display: block 的固有行为而失效——这正是初学者常遇到的典型布局困境。
现代、简洁且可靠的解决方案是使用 CSS Flexbox。只需为两个边框容器添加一个共同父容器，并设置 display: flex，即可轻松实现水平排列。
✅ 正确实现步骤：
-
新增包裹容器：将两个
.border和.border-2<div> 包裹在一个新 <code><div class="border-container"> 中； <li> <strong>启用 Flex 布局</strong>：为该容器设置 <code>display: flex； -
控制对齐与间距：使用
justify-content（主轴对齐）、align-items（交叉轴对齐）和gap（项间间隙）提升布局可控性。 - 不要在
.border和.border-2中保留margin: auto，它会与flex的自动外边距逻辑冲突； - 若需响应式适配（如小屏幕下恢复垂直堆叠），可结合媒体查询：
@media (max-width: 768px) { .border-container { flex-direction: column; gap: 1rem; } } -
gap属性兼容性良好（Chrome 45+、Firefox 48+、Safari 14.1+），旧版浏览器可用margin替代，但需注意首/末项额外间距问题。
以下是优化后的完整代码（已移除冗余 margin: auto 和冲突的 display: block 影响）：
/* 公共样式保持不变 */
html, body {
font-family: Arial, Sans-Serif;
text-align: center;
padding: 20px;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
font-size: 16px;
cursor: pointer;
margin-bottom: 10px;
/* 移除 display: block 和 margin: auto —— 它们会干扰 flex 子项的默认行为 */
}
.button:hover {
background-color: #038253;
}
.border,
.border-2 {
border: 3px solid black;
padding: 10px;
width: 150px;
margin-top: 20px;
}
/* 新增：Flex 容器 */
.border-container {
display: flex;
justify-content: center; /* 水平居中整个 flex 行 */
align-items: flex-start; /* 顶部对齐（避免因内容高度差异导致错位） */
gap: 1.5rem; /* 推荐使用 gap 替代 margin，更语义化、无副作用 */
}<h1>Test Site</h1>
<div class="border-container">
<!-- Button Group 1 -->
<div class="border">
<button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
<button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
<button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
</div>
<!-- Button Group 2 -->
<div class="border-2">
<button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
<button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
<button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
</div>
</div>⚠️ 注意事项：
Flexbox 是解决此类“并排布局”需求的首选方案——语义清晰、代码精简、维护性强。掌握它，你将迈出 CSS 布局进阶的关键一步。
