我遇到了flexbox和gap属性的意外行为。令我惊讶的是，当我通过删除元素并将其添加回DOM来“刷新”时，一切都按预期进行。这让我相信第一次绘制会以某种方式出错，当我“强制重新加载”时，它会自行修复。
问题是一个简单的inline-flex元素，它包含内联单词和前两个单词之间的绝对定位span。gap应用于前两个单词之间，但我不应该这样做，因为它们不是实际的块子元素。没有span差距就不会创建。
下面的GIF最好地展示了奇怪的行为。这里发生了什么，有什么方法可以修复它吗？
的数据
Codepen demo
HTML
<div>
Left <span class="show-for-sr">sr label </span>Right with SR label
</div>
<br>
<div>
Left Right without SR label
</div>字符串
CSS
.show-for-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
div {
position: relative;
display: inline-flex;
align-items: center;
gap: 3.5em;
}型
1条答案
按热度按时间m0rkklqb1#
差距应用于前两个单词之间，但我不应该这样做，因为它们不是实际的块子元素。
差距**应该被应用，这是正确的行为。
position: absolute的使用无关紧要。HTML代码是你需要考虑的。从规格来看：
Flex容器的每个流入子元素都成为一个Flex项，每个连续的子文本运行序列都 Package 在一个匿名块容器Flex项中。
因此，当具有：
字符串
这意味着你有2个“连续的子文本序列”加上span元素。所以总共有3个flex项，如果你使span为
position: absolute，那么只剩下2个flex项，你会得到你看到的结果。flexbox的黄金法则是永远不要让文本容器成为flexbox容器：https://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p
您应该将内容 Package 在另一个容器中：
型