保证金有什么区别：auto和justify-content / align-items中心？ [英] What's the difference between margin:auto and justify-content / align-items center?

问题描述

为了同时横向和纵向居中，有两个简单的选项：

第一个

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

第二

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

有什么区别？在什么情况下我们会用另一种呢？

解决方案

  .outer {
 display：flex; 
} 
 .inner {
 margin：auto; 
 
 $ / code> 

... auto 保证金只适用于flex项目，并且以一个flex项目为中心。



在第二个例子中...

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

您正在集中来自容器级别的项目。另外，请记住，如果你同时使用两个方法， margin：auto 应该为准。

8.1。与自动
利润率保持一致

通过 justify-content 和 align-self ，任何
正空闲空间都会被分配到该维度中的自动页边空白处

如果可用空间分配给自动边距，则对齐属性
在该维度中将不起作用，因为边距将会有
被盗用。弯曲后剩余的所有可用空间。

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

为了解决这个问题，使用 margin：auto

以下是一个更完整的解释：

• a href =https://stackoverflow.com/q/33454533/3597276>无法滚动到溢出容器的Flex项目的顶部


• 垂直和水平居中放置一个Flex项目（见框＃56）

IE错误：

• Flex自动保证金不能在IE10 / 11中工作 .com / q / 34862068/3597276>>

Flexbox自动页边空间不能与justify-content：

To center both horizontally and vertically simultaneously, there are two simple options:

First

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

Second

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

What's the difference? In what situations would we use one over the other?

解决方案

In your first example...

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

... the auto margin applies only to the flex item and centers that one flex item within the container.

In your second example...

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

You are centering items from the container level. This code will center all items.

Also, keep in mind, if you use both methods at the same time, margin: auto should prevail.

8.1. Aligning with auto margins

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.

But the most important difference, for practical purposes, may be the behavior when a flex item exceeds the size of the container. When this happens, you lose access to parts of the item when using the container-level code. The item disappears from the screen and is not accessible via scroll.

To overcome this problem, use margin: auto for centering to work properly.

Here's a more complete explanation:

• Can't scroll to top of flex item that is overflowing container
• Center a flex item vertically and horizontally (see Box #56)

IE Bugs:

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

这篇关于保证金有什么区别：auto和justify-content / align-items中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！