边距：自动和两端对齐内容/对齐项目中心有什么区别？

同时水平和垂直居中，有两个简单的选项：

第一个

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

第二

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

有什么区别？在什么情况下，我们将使用一个？

在您的第一个示例中...

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

... auto保证金仅适用于flex项目，并以容器中的一个flex项目为中心。

在您的第二个示例中...

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

您是从容器级别居中的项目。此代码将中心所有项目。

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

8.1。与自动对齐保证金
在通过justify-content和align-self对齐之前正空空间分布在该维度的自动边距
中
如果将可用空间分配到自动边缘，则对齐属性在这个维度上不会有任何影响弯曲后偷走了所有的自由空间。

，但最重要的区别就实际目的而言，可能是flex项目超过容器大小的行为。发生这种情况时，使用容器级代码时，您将无法访问该项目的一部分。该项目从屏幕上消失，无法通过滚动访问。

要克服这个问题，请使用margin: auto进行核心正常工作。

这是一个更完整的解释：

IE错误：

相关内容