使用 gap 与 flex 属性可高效实现响应式工具栏布局。首先将容器设为 display: flex 并设置 gap，如 .toolbar { display: flex; gap: 8px; }，使按钮间保持统一间距且不影响容器边缘；结合 flex: 1 让特定元素（如搜索框）占满剩余空间，flex: none 保持按钮固有尺寸；垂直布局时使用 flex-direction: column，gap 仍生效，确保清晰结构；相比 margin，gap 避免外边距合并问题，提升布局整洁性与灵活性，现代浏览器支持良好，仅需注意 IE 不兼容。
在CSS中使用Flex布局实现工具栏按钮的排列时，结合 gap 与 flex 属性可以轻松创建美观、响应式的布局。虽然传统Flex布局本身不支持 gap，但在容器设置为 display: flex 的同时启用 gap（从现代浏览器支持开始），可以直接在弹性项目之间添加间距，无需额外的margin。
启用 Flex 容器并使用 gap
将工具栏容器设为 display: flex，然后使用 gap 属性统一控制按钮之间的间距。
.toolbar {
display: flex;
gap: 8px; /* 按钮之间的间距 */
padding: 8px;
background-color: #f0f0f0;
}
<p>.toolbar-button {
padding: 10px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
这样所有按钮之间都会保持一致的 8px 间距，且不会影响容器边缘，布局更整洁。
结合 flex 属性控制按钮伸缩行为
当工具栏空间有限或需要某些按钮占据更多空间时，可以使用 flex 属性进行控制。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1让按钮平均分配剩余空间 -
flex: 0 1 auto允许按钮根据内容伸缩，但不强制填满 - 固定宽度按钮可设
flex: none
.toolbar {
display: flex;
gap: 8px;
align-items: center;
}
<p>.search-input {
flex: 1; /<em> 输入框占满剩余空间 </em>/
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}</p><p>.toolbar-button {
flex: none; /<em> 不伸缩，保持固有尺寸 </em>/
padding: 8px 12px;
background: #007bff;
color: white;
border: 0;
border-radius: 4px;
}
垂直工具栏中的 gap 应用
对于垂直排列的工具栏，设置 flex-direction: column 后，gap 同样生效。
.toolbar-vertical {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
width: 80px;
background-color: #f5f5f5;
}
每个按钮在垂直方向上间隔 6px，结构清晰，易于点击。
基本上就这些。使用 gap 替代 margin 可避免外边距叠加问题，结合 flex 能灵活控制布局。只要注意浏览器兼容性（IE不支持 gap in flex），现代项目中完全可以放心使用。
