html – 保证金之间有什么区别：auto和justify-content / align-

发布时间：2020-12-14 22:31:53 所属栏目：资源来源：网络整理

导读：要同时水平和垂直居中,有两个简单的选项：第一 .outer { display:flex;}.inner { margin:auto;} 第二 .outer { display: flex; justify-content: center; align-items: center;} 有什么不同？在什么情况下我们会使用一个而不是另一个？解决方法在你的第一

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

第一

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

第二

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

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

解决方法

在你的第一个例子中……

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

…自动边距仅适用于弹性项目,并且集中在容器中的一个弹性项目中.

在你的第二个例子中……

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

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

另外,请记住,如果您同时使用这两种方法,则以margin：auto should为准.

07001

Prior to alignment via justify-content and align-self,any
positive free space is distributed to auto margins in that dimension

If free space is distributed to auto margins,the alignment properties
will have no effect in that dimension because the margins will have
stolen all the free space left over after flexing.

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

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

这是一个更完整的解释：

> Can’t scroll to top of flex item that is overflowing container
> Center a flex item vertically and horizontally(见专栏#56)

IE错误：

> Flex auto margin not working in IE10/11
> Flexbox auto margins don’t work with justify-content: center in IE

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!