Explanation
If you do not utilize the display: flex property, your layout will resemble this:
<div class="has_flex"><!--
--><anonymous style="display: inline">Some text </anonymous><!--
--><a style="display: inline">Link</a><!--
--></div>
The content (including the trailing space) is contained within an anonymous inline box:
Any text directly inside a block container element (not inside an inline element) is treated as an anonymous inline element.
However, with Flexbox layout, the flex items are blockified:
The display value of a flex item is blockified: if
the declared display of an in-flow child of a parent element creating a flex container is an inline-level value, it converts to its block-level counterpart.
As a result, the layout transforms into this structure:
<div class="has_flex"><!--
--><anonymous style="display: block">Some text </anonymous><!--
--><a style="display: block">Link</a><!--
--></div>
This may not seem directly connected, but it's significant due to the white-space processing model:
Following this, blocks containing inlines are arranged. [...] As each line
is laid out, [...]
- If there is a space (U+0020) at the end of a line with
white-space
set to normal, nowrap, or pre-line, it is also removed.
Thus, when both the anonymous element and the link were inline, the space resided in the middle of a line. Multiple spaces would condense into one, but wouldn't completely vanish.
However, through the use of flexbox, each flex item possesses its own lines, resulting in the space being positioned at the end of a line where it is eliminated.
Note that this issue extends beyond flexbox, as spaces at the end of an inline-block are similarly eradicated.
To address this concern, you can adjust the white-space property to another value for preserving the space. Utilizing white-space: pre-wrap enables text wrapping, while white-space: pre does not allow wrapping.
.has_flex {
display: flex;
white-space: pre-wrap;
}
<div class="no__flex">Some text <a href="link">Link</a></div>
<div class="has_flex">Some text <a href="link">Link</a></div>