flex布局实现换行从文本正下方开始而非下一行初始

先看效果：

再看HTML：

<div class="flex-h-left-center">
  <div class="person-label">领域：</div>
  <div class="flex-wrap">
      <div class="person-label-text" v-for="(field, index) in expertInfo.tagField" :key="index">{{ field }}
     </div>
  </div>
</div>
1
2
3
4
5
6
7

再看CSS：

.flex-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      flex: 1;
    }
1
2
3
4
5
6
7

核心点：在需要正下方进行换行效果的位置，包一个div，并将该div设置flex布局及对应的几项后，即可实现。