两个快速修复：
1.您可以在<p>-元素上应用max-width: fit-content。这样，<p>-元素将只拉伸其宽度，直到它有内容来填充它。
1.您可以在flex-container上应用align-items: flex-start。
此外，如果您希望悬停效果在垂直方向上也是精确的，您应该删除Flexbox边距和行高。您可以使用flex-gap: 50px。

/* ---  Max-width ---*/
.flex-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.list1 {
  font-size: 25px;
  text-align: left;
  /*line-height: 2;
  flex: 1 50px; */
  max-width: fit-content;
}

/* ---  Flex-start ---*/
.flex-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flex-start-list {
  font-size: 25px;
  text-align: left;
  /*line-height: 2;
  flex: 1 50px;*/
  flex-gap: 50px;
}

.list1:hover, .flex-start-list:hover {
  color: #87C1E8;
}

<div class="flex-list">
  <p class="list1"> Fashion</p>
  <p class="list1"> Wellness</p>
  <p class="list1"> Lifestyle</p>
  <p class="list1"> Advise </p>
</div>


<div class="flex-start">
  <p class="flex-start-list"> flex-start</p>
  <p class="flex-start-list"> flex-start</p>
  <p class="flex-start-list"> flex-start</p>
  <p class="flex-start-list"> flex-start</p>
</div>