使用 flex-grow 与 media queries 可创建响应式工具栏：首先设置 toolbar{display:flex}，通过 flex-grow:1 让内容区自动填充空间，按钮保持固定；在小屏幕下，用 @media(max-width:768px) 隐藏非必要元素或改为垂直布局，实现适配。
要在CSS中创建一个响应式工具栏，结合 flex-grow 与 media queries 是一种高效且灵活的方法。这种组合能确保工具栏在不同屏幕尺寸下自动调整布局，既保持美观又提升用户体验。
使用 Flexbox 布局基础
Flexbox 让容器内的子元素可以灵活分配空间。通过设置父容器为 display: flex，你可以让工具栏的各个部分自动适应可用宽度。
关键点是使用 flex-grow 属性，它定义了子元素在容器中有剩余空间时的扩展能力。例如，让主要内容区域自动填充空白，而菜单按钮保持固定大小。
示例：- 将工具栏设为 flex 容器：toolbar { display: flex; }
- 让内容区域占满剩余空间：content { flex-grow: 1; }
- 按钮或图标保持原始宽度：button { flex-grow: 0; }
用 Media Queries 调整断点
当屏幕变小时，你可能希望隐藏某些元素或改变布局结构。Media Queries 允许你在特定屏幕宽度下覆盖默认样式。
立即学习“前端免费学习笔记（深入）”；
比如在小屏幕上，把多个按钮折叠成一个“菜单”图标，或者将横向排列改为垂直堆叠。
常见做法：- @media (max-width: 768px) { ... } 适配平板
- @media (max-width: 480px) { ... } 适配手机
- 在小屏中设置部分元素 display: none;
- 调整 flex-direction 为 column 以垂直排列
实际应用示例
假设你有一个包含 logo、导航链接和操作按钮的工具栏。桌面端所有内容水平排列，内容区自动伸展；移动端则隐藏部分链接，只保留菜单按钮。
- 默认状态下使用 flex-grow 让中间区域撑开，分离左右元素
- 在小屏幕上通过 media query 缩小字体、隐藏次要按钮
- 使用 flex-wrap 或重新排列顺序（order）优化显示效果
基本上就这些。合理利用 flex-grow 分配空间，再配合 media queries 控制不同设备的表现，就能做出简洁高效的响应式工具栏。不复杂但容易忽略细节。
