マージンの違いは何ですか？autoとjustify-content/align-items center？同時に水平方向と垂直方向の両方中央に

Question

、2つの単純なオプションがあります：

まず

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

セカンド

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

が違いは何ですか？どんな状況で私たちはどちらかを使いますか？あなたの最初の例で

Answer 1

...

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

... autoマージンはフレックスアイテムに適用され、コンテナ内の1つのフレックス項目を中央に配置します。

2番目の例では

...

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

あなたは、コンテナレベルからアイテムを中心にしています。このコードはすべての項目になります。

また、両方の方法を同時に使用する場合は、margin: autoshouldが優先されます。

前justify-contentとalign-self介しアラインメントに、任意 正の空き領域が空き領域が自動マージンに分配さ

場合、その寸法に自動マージンに分配さ8.1. Aligning with auto margins

、配向性が 意志屈曲後に残りの余分なスペースを余白に残しておき、その余白には が盗まれるため、このディメンションには何の効果もありません。

しかし、最も重要な違い、実用的な目的のために、フレックス項目がコンテナのサイズを超えた場合に動作することがあります。この場合、コンテナレベルのコードを使用するとアイテムの一部にアクセスできなくなります。アイテムは画面から消え、スクロールではアクセスできません。

この問題を解決するには、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
• は、

Answer 2

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

私は両方のソリューションが同じことを

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