Why does changing the font size of a child element cause the flex container to deviate from its original position?-PHP Chinese Network Q&A

This problem is very strange. It behaves differently on ordinary containers and flexible boxes.

Change the font size of the first child element:

For ordinary containers, why does the height of the container change?
For the flexible box, why does the flexible box move down or up at a certain distance?

How can I solve this problem? I want the flexbox not to move.

Supposedly, this only happens when changing the font size of the first child element. Changing the font size of the second child element is not important... why?

* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #121212; color: #fff; font-size: 20px; } .container { line-height: 48px; font-size: 36px; border: 1px solid #f90; } .first { color: #ffe47e; animation: change1 3s linear infinite; } @keyframes change1 { 0%, 100% { font-size: 0.1em; } 50% { font-size: 1em; } } @keyframes change2 { 0%, 100% { font-size: 0.1em; } 50% { font-size: 2em; } } .c2 { display: inline-flex; column-gap: 5px; } .c2 .first { font-size: 0.5em; animation: change2 3s linear infinite; } .c3 .first { font-size: 0.5em; animation: none; }

  first Second 
  Second This doesn't matter 
 (flexbox) How to make the first flex container align with the second one? 
  (flexbox) Animation illustration  first Second 
  Second This doesn't matter 
 
 (normal container) Animation illustration - Why is height changing?  first Second

reply all (2)

P粉5187995572023-07-24 12:40:25 2 floor

Suppose your first text has a font size of 50px and your second text has a font size of 0px, and you want to switch font sizes. At this point, the height of the content is 50px. In the middle of the animation, the font size of both texts changes to 25px, so the height of the content also changes to 25px. At the end of the animation you again have 50px and 0px font size, so the height of the content is 50px.

The height of the div will be adjusted according to the height of the content.

Like+0

Add Reply

P粉3788901062023-07-24 12:02:22 1 floor

Please do not ask multiple questions in the same question.

The first question about "normal" (i.e. block-level) containers has been repeated. The issue of making paragraphs larger with the tag has been discussed in detail.

For flexbox containers, this is determined by the way the flexcontainer determines its baseline. The relevant specification is stated below:

The default alignment of flex items is "stretch", which means that flex items do not participate in baseline alignment, so the first point does not apply.

The second point applies, meaning that the first flex item of each flex container provides the baseline against which the individual flex containers will be aligned.

The standard way to deal with this problem is to move inline-flex or inline-block container elements away from the baseline by setting vertical-align:top on them.