How can I align a list of item in the right side as a list using flexbox?

something like this?

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

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to separate the two elements.

Something like this:

.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1. Group the last three <span> in a <p>
2. Wrap the first <span> and <p> in a <div>