I'm in the early stages of grasping the basic flexbox concepts. The Using CSS Flexible Boxes article at MDN states (emphasis mine):
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
That means that the following mark-up automatically provides three items to play with:
p, em {
margin: 1em;
padding: 1em;
}
p {
border: 1px solid blue;
display: flex;
justify-content: space-between;
}
em {
border: 1px solid orange;
display: inline-flex;
}
<p>This is a <em>just</em> a test.</p>
See Question&Answers more detail:os