CSS flex box last space removed

Question

By setting the display of an item to flex I am finding the last space is removed from a text string so.

          


        
                      

              相关标签:
       
      

Answer 1

The end of the div is missing. So, strange things can happen. This could be what you want:

<div class="has_flex"> Some text <a href="link">Link</a></div>

Answer 2

Reason

When you don't use display: flex, the your layout becomes something like

<div class="has_flex"><!--
  --><anonymous style="display: inline">Some text </anonymous><!--
  --><a         style="display: inline">Link</a><!--
--></div>

The text (including the space at the end) is wrapped inside an anonymous inline box:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

However, Flexbox layout blockifies the flex items:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Then, the layout will be like

<div class="has_flex"><!--
  --><anonymous style="display: block">Some text </anonymous><!--
  --><a         style="display: block">Link</a><!--
--></div>

This might not seem directly related, but it's relevant because of the white-space processing model:

Then, the block container's inlines are laid out. [...] As each line is laid out, [...]

3. If a space (U+0020) at the end of a line has white-space set to normal, nowrap, or pre-line, it is also removed.

So when the anonymous element and the link were both inline, the space was at the middle of a line. If you had multiple spaces they would collapse into a single one, but not disappear completely.

However, when you use flexbox, each flex item has its own lines, and the space is therefore at the end of a line. So it's removed.

Note this problem is not specific of flexbox, spaces at the end of an inline-block are also removed.

.in-blo {
  display: inline-block;
}

<div><span class="inline">Some text </span><a href="link">Link</a></div>
<div><span class="in-blo">Some text </span><a href="link">Link</a></div>

However, in that case you can just move the space outside the inline-block. In flexbox that's not possible, because anonymous flex items that contain only white space are not rendered.

Solution

If you want to preserve the space, you can set white-space to another value. white-space: pre-wrap will allow text wrapping, white-space: pre won't.

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