显示器flex的容器内的<hr>损坏

特别要注意margin-left: auto,margin-right: auto.

这些样式用于水平居中块元素.根据计算宽度和边距 - 块

如果这两个margin-left和margin-right是auto,它们的使用值是相等的.这使元件相对于容纳块的边缘水平居中.

在块布局中,只有块具有明确的宽度时,此效果才会显着,否则块将增长以覆盖其所有包含的块.

在Flexbox中它类似:默认align-self: auto和align-items: stretchmake flex项目增长到覆盖横轴的柔性线(列布局中的水平线),auto边距也可用于居中.

但是,存在很大差异:根据交叉尺寸确定,align-self: stretch不会影响具有auto边距的弹性项目:

如果flex项具有align-self: stretch,其计算的交叉尺寸属性是auto,并且它的横轴边距都不是auto,则使用的外部交叉尺寸是其柔性线的使用交叉尺寸,根据项目的最小和最大交叉尺寸属性进行夹紧.否则,使用的交叉大小是项目的假设交叉大小.

然后,您可以通过删除auto边距来解决此问题:

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

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
hr {
  margin-left: 0;
  margin-right: 0;
}

  
Title
  

  

    
This is some content