Geek Answers Handbook

Removed the last CSS flex field

By setting the display element to flex , I found that the last place is removed from the text string, therefore.

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

becomes

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

 .has_flex { display: flex; } 
 <div class="no__flex">Some text <a href="link">Link</a></div> <div class="has_flex">Some text <a href="link">Link</a></div>

I wrapped the text in between, and that doesn't make any difference.

+5
source share
2 answers

Cause

If you do not use display: flex , your layout will become something like

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

The text (including a space at the end) is enclosed within an anonymous inline block :

Any text that is contained directly inside a block container element (not inside an inline element) should be considered an anonymous inline element.

However, the Flexbox layout blocks flex items :

display value of flex item is locked : if the specified display child stream in the element stream generating the flex container is an inline level value, it computes to its block level equivalent.

Then the layout will look like

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

This may not seem practical, but it is important because of the white-space processing model :

Then the slings of the block container line up. [...] How each line is laid out, [...]

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

So, when the anonymous element and the link were both inline, the space was in the middle of the line. If you had several spaces, they would have collapsed by one, but not completely disappeared.

However, when you use flexbox, each flex element has its own lines, and therefore the space is at the end of the line. Therefore, he retired.

Please note that this problem does not apply to flexbox, the spaces at the end of the 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 this case, you can simply move the space outside the inline block. This is not possible with Flexbox because anonymous flex items that contain only a space are not displayed.

Decision

If you want to keep a space, you can set white-space to a different value. white-space: pre-wrap allows text wrapping, white-space: pre will not.

 .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>
+8
source

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

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

More articles:


All Articles