第一
.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-contentandalign-self,any
positive free space is distributed to auto margins in that dimensionIf 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
