如何使用flexbox实现列表项在右侧对齐展示？

预期效果示意图：

现有代码的问题在于所有元素都在同一级flex容器中，默认横向排列，无法实现右侧内容的纵向列表对齐。你可以通过调整结构+补充flex规则实现需求：

方案1（推荐，语义更清晰） #

调整HTML结构 #

将右侧需要纵向排列的3个条目包裹在独立容器中，和左侧标题「List」同级：

<p>
  <span>List</span>
  <span class="right-items">
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </span>
</p>

补充CSS规则 #

父容器保持横向flex布局实现两端对齐，右侧容器设置为纵向flex布局：

p {
  display: flex;
  justify-content: space-between;
  /* 可根据需求自定义父容器宽度 */
  width: 280px;
  margin: 0;
}

.right-items {
  display: flex;
  flex-direction: column;
  /* 可选设置文字右对齐，更符合示意图效果 */
  text-align: right;
}

方案2（无需修改HTML结构） #

直接通过flex换行+宽度分配实现效果：

p {
  display: flex;
  flex-wrap: wrap;
  width: 280px;
  margin: 0;
}

p span:first-child {
  /* 左侧标题占一半宽度 */
  flex: 0 0 50%;
}

p span:not(:first-child) {
  /* 右侧条目占另一半宽度，右对齐 */
  flex: 0 0 50%;
  text-align: right;
}

内容的提问来源于stack exchange，提问作者Andres