保证金之间有什么区别:auto和justify-content/align-items center？

Question

要同时水平和垂直居中,有两个简单的选项:

第一

.outer {
  display:flex;
}
.inner {
  margin:auto;
}

第二

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

有什么不同？在什么情况下我们会使用一个而不是另一个？

Answer 1

在你的第一个例子中......

.outer {
  display: flex;
}
.inner {
  margin: auto;
}

... auto保证金仅适用于灵活项目和集中在容器内的一个弹性项目.

在你的第二个例子中......

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

您是集装箱级别的中心项目.此代码将以所有项目为中心.

另外,请记住,如果您同时使用这两种方法,则margin: auto 应该占上风.

8.1.与自动边距对齐

在通过justify-content和进行对齐之前align-self,任何正的自由空间都会分配到该维度中的自动边距

如果将自由空间分配给自动边距,则对齐属性在该维度中将不起作用,因为边距将在弯曲后窃取剩余的所有可用空间.

但是,出于实际目的,最重要的区别可能是当flex项超过容器大小时的行为.发生这种情况时,在使用容器级代码时,您将无法访问项目的某些部分.该项目从屏幕上消失,无法通过滚动访问.

要解决此问题,请使用margin: auto居中以正常工作.

这是一个更完整的解释:

IE错误: