vue中让一个div中的button，从同一行开始依次排列，如果放不下了放到下一行，写个案例

可以使用`flex`布局来实现这个功能。下面是一个简单的Vue案例，其中使用了`flex`布局和`v-for`指令来动态生成多个按钮，这些按钮会自动排列在同一行，如果一行放不下了就会自动折行。

<template>
  <div class="container">
    <button v-for="i in buttons" :key="i">{{ i }}</button>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
button {
  margin: 5px;
  padding: 10px;
  border: 1px solid black;
}
</style>

<script>
export default {
  data() {
    return {
      buttons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
  }
};
</script>

在这个例子中，我们在父级容器（即`<div class="container">`）中使用了`flex`布局，并设置了`flex-wrap: wrap`属性，表示当一行放不下时自动折行。我们还设置了每个按钮的`margin`和`padding`以及边框样式，以便更好地展示它们的位置。

在`<button>`标签中，我们使用了`v-for`指令来遍历`buttons`数组中的元素，并为每个元素生成一个按钮。在这里，我们使用了简写语法`:key="i"`来为每个按钮指定一个唯一的键值。这有助于Vue在重新渲染页面时更高效地处理这些按钮。

最终的效果如下所示：