保證金：自動和justify-content/align-items中心有什麼區別？

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: autoshould爲準。

8.1. Aligning with auto margins

此前經由justify-content和align-self對準，任何 正自由空間被分配到汽車邊距該維度

如果自由空間被分配給自動邊距，取向性 將在該維度上沒有任何影響，因爲邊距將會在彎曲後偷走所有剩餘空間。

但最重要的區別，出於實用的目的，可當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

Answer 2

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

我用這情況下，我可能要對齊，以在不同的屏幕尺寸是不同的..

@media max-width: 768px{ 
.outer { 
    justify-content: flex-end; 
} 
}