css设置toolbar自动换行

如果你想让一个 Toolbar 在达到一定宽度后自动换行，可以使用 CSS 中的 `flexbox` 布局。具体步骤如下：

1. 将 Toolbar 的容器设置为 `display: flex;`，这将使得容器内的元素排列在一行上。
2. 设置容器的宽度，例如 `width: 1000px;`。
3. 将容器的子元素设置为 `flex: 1;`，这将使得每个子元素都占据容器的相同比例。
4. 如果需要，在子元素中设置 `min-width` 或 `max-width` 属性来限制子元素的宽度范围。

这样，当容器的宽度不足以容纳所有子元素时，子元素会自动换行，保持它们在容器内的相对位置不变。

下面是一个示例代码，你可以根据自己的实际情况进行调整：

<div class="toolbar-container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <button>按钮6</button>
  <button>按钮7</button>
  <button>按钮8</button>
</div>

.toolbar-container {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
}

.toolbar-container button {
  flex: 1;
  min-width: 100px;
  max-width: 200px;
}

在上面的示例代码中，当容器宽度达到 1000 像素时，容器中的子元素会自动换行，每行最多容纳 5 个按钮，每个按钮占据相同的比例，且宽度在 100 到 200 像素之间。