为何flex容器中的hr元素宽度为0？相关技术疑问

这个问题问得很有意思！其实hr并没有真的消失，只是它的宽度被压缩到了肉眼不可见的0，背后是flex布局的尺寸计算规则在起作用：

1. 普通上下文里的hr表现：在常规的块级容器中，hr作为块级元素，默认宽度会自动占满父容器的100%，这是块级元素的标准行为。
2. 进入flex上下文后的变化：当hr被放进display: flex的容器时，它会自动成为flex item，此时它的尺寸计算逻辑完全变了：
   • 默认flex-basis: auto：这个属性决定flex item的初始宽度，auto会取元素的「内容宽度」。但hr本身没有实际内容（它的横线是靠边框/内置样式实现的），所以内容宽度为0。
   • 默认flex-shrink: 1：这个属性允许flex item在容器空间不足时自动收缩，默认值是1（允许收缩）。

结合这两点，hr作为flex item的初始宽度是0，又允许收缩，自然就缩成了一条看不见的线，看起来像是“消失”了。而你设置width: 100%后，相当于强制指定了它的宽度为容器的100%，覆盖了flex item的默认尺寸计算逻辑，所以它又重新显示出来了。

其实不存在“莫名消失”，所有类似现象都是flex布局规则导致的尺寸变化，常见场景有这些：

• 空元素或无内容元素：比如空的<div>、<span>，在flex容器里如果没设置宽度/flex-basis，会因为内容宽度为0，加上默认flex-shrink:1，缩成0尺寸，看起来像消失了。
• 替换元素（如img）：如果img没有设置固定宽高，当flex容器空间不足时，默认的flex-shrink:1会让它被压缩，极端情况下可能缩到0。
• 行内元素转为flex item：比如<a>、<span>这些行内元素，在flex容器里会被块级化，但如果没有内容，同样会缩成0宽度。

要避免这种情况，只需要给flex item明确指定尺寸（比如width、flex-basis），或者设置flex-shrink: 0禁止它收缩即可。

内容的提问来源于stack exchange，提问作者nCardot