html - 如何使用 flexbox 在右侧显示元素列表？

Question

如何使用 flexbox 将右侧的元素列表对齐为列表？
像这样的东西？

p {
  display: flex;
  justify-content: space-between;
}

<p>
  <span>List</span>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
</p>

Answer 1

您需要将这两个元素分开。
像这样的东西:

.list {
  display: flex;
  justify-content: space-between;
}

<div class="list">
<div>      
<span>List</span>
</div>
<div>
  <div>3 oranges</div>
  <div>4 apples</div>
  <div>6 bananas</div>
</div>
</div>