如果 <ul> 的长度超过屏幕宽度，则 <li> 项目转到下一行

Question

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

  <ul class="list-items" :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;`

Answer 1

您可以添加“flex-wrap:wrap;” 到这样的规则：

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