英文:
Why does changing the children's font size cause the flex container to offset from original place
问题
这个问题很奇怪,在普通容器和弹性盒子上表现不同。
改变第一个子元素的 font-size
:
- 对于普通容器,为什么会改变容器的高度?
- 对于弹性盒子,为什么会使弹性盒子上下移动一段距离?
我该如何解决这个问题?我希望弹性盒子不要移动。
需要说明的是,只有在改变第一个子元素的 font-size
时才会发生这种情况。改变第二个子元素的 font-size
不会影响... 为什么?
* {
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;
}
<div style="margin-bottom: 50px;">
<div class="container c2 c3">
<span class="first">first</span>
Second
</div>
<div class="container c2 c3">
Second
<span class="first">This doesn't matter</span>
</div>
(flexbox) 如何使第一个弹性盒子与第二个弹性盒子对齐?
</div>
<div style="margin-bottom: 50px;">
(flexbox) 动画示例
<div class="container c2">
<span class="first">first</span>
Second
</div>
<div class="container c2">
Second
<span class="first">This doesn't matter</span>
</div>
</div>
(normal container) 动画示例 - 为什么高度会改变?
<div class="container">
<span class="first">first</span>
Second
</div>
英文:
This issue is weird, acts differently on normal containers and flexbox.
Changing the font-size
of the FIRST children:
- for NORMAL CONTAINER, why is it changing the container's height?
- for FLEXBOX, why is it making the flexbox move down or up for some distance?
How do I resolve this? I want the FLEXBOX not to move.
To be said, it's only happening when changing font-size
of first children. Changing the second doesn't matter... why?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<div style="margin-bottom: 50px;">
<div class="container c2 c3">
<span class="first">first</span>
Second
</div>
<div class="container c2 c3">
Second
<span class="first">This doesn't matter</span>
</div>
(flexbox) How to make the first flex container align with the second one?
</div>
<div style="margin-bottom: 50px;">
(flexbox) Animation illustration
<div class="container c2">
<span class="first">first</span>
Second
</div>
<div class="container c2">
Second
<span class="first">This doesn't matter</span>
</div>
</div>
(normal container) Animation illustration - Why is height changing?
<div class="container">
<span class="first">first</span>
Second
</div>
<!-- end snippet -->
答案1
得分: 1
请不要将多个问题放在同一个SO问题中。
关于“normal”(即块级)容器的第一个问题是一个重复的问题。它已经被详细讨论在标签使段落高度变大中。
对于弹性盒子容器,这是由弹性容器如何确定它们的基线来处理的。相关规范如下:
第一个/最后一个主轴基线集
当弹性容器的内联轴与其主轴匹配时,其基线如下确定:
如果弹性容器的起始/结束弹性线上的任何弹性项参与基线对齐,那么弹性容器的第一个/最后一个主轴基线集将从这些弹性项的共享对齐基线生成。
否则,如果弹性容器至少有一个弹性项,则弹性容器的第一个/最后一个主轴基线集将从起始/结束最靠近的弹性项的对齐基线生成。 (如果该项没有与弹性容器主轴平行的对齐基线,则首先从其边框边缘合成一个。)
否则,弹性容器没有第一个/最后一个主轴基线集,并且根据其对齐上下文的规则,将根据需要合成一个。
弹性项的默认对齐方式是“stretch”,这意味着弹性项不参与基线对齐,因此点1不适用。
点2适用,这意味着每个弹性容器中的第一个弹性项提供了每个弹性容器将对齐的基线。
处理这个的标准方法是通过给予内联弹性容器元素或内联块容器元素vertical-align:top
来将它们移出基线。
英文:
Please don't put multiple questions into the same SO question.
Your first question about "normal" (i.e. block) containers is a duplicate. It's thoroughly covered by <small> tag makes height of paragraph larger
For the flexbox container, this is covered by how the flex containers determine their baselines. The relevant specification says:
> 8.5. Flex Container Baselines
>
> first/last main-axis baseline set
>
> When the inline axis of the flex
> container matches its main axis, its baselines are determined as
> follows:
>
> 1. If any of the flex items on the flex container’s
> startmost/endmost flex line participate in baseline alignment, the
> flex container’s first/last main-axis baseline set is generated from
> the shared alignment baseline of those flex items.
>
> 2. Otherwise, if the flex container has at least one flex item, the flex
> container’s first/last main-axis baseline set is generated from the
> alignment baseline of the startmost/endmost flex item. (If that item
> has no alignment baseline parallel to the flex container’s main axis,
> then one is first synthesized from its border edges.)
>
> 3. Otherwise, the flex container has no first/last main-axis baseline
> set, and one is synthesized if needed according to the rules of its
> alignment context.
The default alignment for flex items is "stretch", which means that the flex-items are not participating in baseline alignment, and point 1 does not apply.
Point 2 applies and means that the first flex item in each flex container provides the baseline on which each of the flex containers will align will each other.
The standard way of dealing with this is to take the inline-flex or inline-block container elements off the baseline by giving them vertical-align:top
.
答案2
得分: 0
让我们假设您有第一段文字的字体大小为 font-size:50px
,第二段文字的字体大小为 font-size:0px
,您想要交换它们的字体大小。在此时,内容的高度为 50px
。在动画中间,两段文字的字体大小都变为 font-size:25px
,因此内容的高度也是 25px
。在动画结束时,您再次有了 50px
和 0px
,所以内容的高度是 50px
。
div
元素的高度会根据内容的高度进行调整。
英文:
Let's say you have the first text at font-size:50px
and the second at font-size:0px
and you want to switch font-size
s. At this point the height of the content is 50px
. In the middle of the animation, both texts have font-size:25px
, so the content height is 25px
too. At the end of the animation you have 50px
and 0px
again, so the content height is 50px
.
The height of the div
is adjusted to the height of the content.
答案3
得分: -1
因为字体也有自己的大小,当你增加字体大小时,容器的大小也会增加,请在字体大小中使用rem单位。
英文:
because font also having its on size, we you increasing font size so size of container also increase, use rem in font size,
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论