Html 为什么flex将hr元素的宽度设置为0？

当我尝试将

hr

元素放入带有

display:flex

的容器中时，它消失了。（如果我删除

display:flex

，它会重新出现，因此我相信这就是原因。）

我在一篇文章中读到，flex导致

hr

的宽度为零，我通过给它100%的宽度（使其重新出现）来确认这一点，但没有给出任何解释

出于好奇（我只是将

hr

放在flex容器之外以解决问题），为什么会出现这种情况？使用flexbox是否也会导致其他随机元素消失

我不认为我的代码中有其他原因导致了这种情况，但这里是我的完整代码，以防万一：

*{
/*使宽度和高度包括填充、边框*/
框大小：边框框；
}
身体{
字体系列：“流沙”，无衬线；
保证金：0；
}
h1，
h2，
h3，
h4，
h5，
h6{
颜色：#2d3c49；
文本转换：大写；
}
h1{
字号：200；
/*浏览器通常将h1显示为2em*/
字号：2.6em；
页边距底部：0；
}
/*在字幕上方添加一点空格（将h1底部边距设置为0）*/
收割台h4{
边缘顶部：7px；
}
/*顶级内容*/
标题{
显示器：flex；
最大宽度：1000px；
保证金：0自动；
边缘顶部：1米；
/*垂直中心标志*/
对齐项目：居中；
}
/*标志img*/
.标志{
高度：90px；
宽度：自动；
右边距：自动；
}
/*只有副标题没有完全向右对齐；这就解决了问题。TODO:找出为什么不适用于h1文本*/
.标题文本{
显示器：flex；
证明内容：柔性端；
}
人力资源{
背景色：#7d97ad；
最大宽度：1000px；
边缘底部：1米；
边界：无；
高度：3倍；
}
.主图像{
最大宽度：1000px；
高度：自动；
}
/*应用于元素内的内容（不包括页眉、页脚）*/
.集装箱{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
最大宽度：1000px；
保证金：0自动；
}
/*适用于项目部分（包括标题文本）*/
.集装箱项目{
显示器：flex；
/*父容器需要此项，以便flex项在行中具有全宽*/
柔性包装：包装；
弯曲方向：行；
证明内容：之间的空间；
利润率：2米0；
}
.投资组合标题{
/*将标题放在自己的行中，而不从具有行柔性方向的容器中移除（还需要将父容器设置为换行）*/
宽度：100%；
文本对齐：左对齐；
颜色：7d97ad；
}
/*包含单个项目的标题、图像和文本的Div*/
/*TODO:添加声明*/
.项目{
宽度：300px；
高度：自动；
}
.项目p，
h3{
文本对齐：居中；
}
/*图像以3:2的比例裁剪，分辨率缩小到600 x 400*/
.项目形象{
宽度：300px；
高度：自动；
}
页脚{
文本对齐：居中；
边缘顶部：1米；
背景色：#ccc；
颜色：白色；
填料：2米；
字体大小：1.1米；
}
/*删除默认的1em页边距顶部*/
页脚p{
边际上限：0；
}
/*适用于社交图标的字体*/
.晶圆厂{
边缘：0.5 em；
颜色：白色；
}
/*悬停时将社交图标颜色更改为深灰色*/
.fab:悬停{
颜色：#2d3c49；
}
/*媒体查询（断点对应于引导断点）。1rem=16px*/
/*小型设备（景观手机）*/
@媒体屏幕和屏幕（最大宽度：767px）{
h1{
字号：2em；
}
氢{
字号：1.5em；
}
h3{
字体大小：1.3em；
}
h4{
字体大小：1.1米；
}
/*似乎什么都没做：找出原因*/
.投资组合标题{
边缘底部：1米；
}
/*TODO:稍微加宽一点*/
.集装箱项目{
保证金：1.5em 0；
}
标题{
边距：0.1米0；
}
标题，
.货柜，
页脚{
最大宽度：100%；
}
/*必须为img指定最大宽度，即使父容器具有相同的声明，因为最大宽度不是继承的*/
.集装箱img{
最大宽度：100%；
}
.项目{
/*居中项目（否则向左对齐）*/
保证金：0自动；
}
/*将公文包标题文本与公文包行左侧对齐*/
.投资组合标题{
宽度：300px；
利润率：10px自动；
}
.标志{
高度：50px；
宽度：自动；
}
}
/*药片*/
@媒体屏幕和屏幕（最大宽度：991px）{
h1{
字体大小：1.7rem；
}
}
/*小型笔记本电脑*/
@媒体屏幕和屏幕（最大宽度：1199px）{
h1{
字号：2rem；
}
}

娜塔莉·卡多特
前端Web开发人员

特色作品
项目一
Lorem ipsum dolor sit amet，是一位杰出的献身者

项目二
Lorem ipsum dolor sit amet，是一位杰出的献身者

项目3
Lorem ipsum dolor sit amet，是一位杰出的献身者

我创造的

Flex将HR标记的左边距：自动和右边距：自动断开。尝试将其添加到CSS中

hr {margin-left:0;margin-right:0}

---

hr

元素具有由浏览器设置的默认样式。例如，以下是Chrome的功能：

在flex容器中，

auto

页边距会消耗页边距方向上的所有可用空间

因此

-webkit margin start:auto

（在LTR中，相当于

margin left:auto

）和

-webkit margin end:auto

（在LTR中，相当于

margin right:auto

）消耗

hr

元素左右的所有可用空间，将其压缩为

宽度：0

（因为里面没有内容）

您可以使用

width:100%

覆盖这些

auto

页边距。但是使用

margin:0

覆盖

margin:auto

可能更有效

但即使如此，在这种情况下，一旦删除

auto

边距，

align items:center

将从父级开始生效

这将覆盖默认的

align items:stretch

，并对左/右

auto

marg执行相同的操作

hr {
  margin: 0;
  align-self: stretch;
}