我有一个列表（单击小提琴）：

  <ul :style="styleObject">
    <li v-for="(item, index) in listItems" :key="index">
      <span v-if="index != 0">, </span><span>{{ item.name }}</span>
    </li>
  </ul>

<style lang="scss" scoped>
.list-items {
  display: inline-flex;
}
ul {
  list-style-type: none;
}
</style>

它看起来像这样：

这在桌面上很棒，但是当屏幕变小时，单词会被打乱而不是转到下一行：

我想要的是，每当最后一个单词超过屏幕宽度时，它就会转到下一行，这样我的列表就不会像上图那样乱七八糟，我该怎么做？

注意
不确定它是否重要，但class="list-items"在具有以下样式的 div 中：

display: flex;
align-items: center;`

回答

.list-items {
  display: inline-flex;
  flex-wrap: wrap;
}