web-dev-qa-db-ja.com

margin：autoとjustify-content / align-items centerの違いは何ですか？

水平方向と垂直方向の両方を同時に中央に配置するには、2つの簡単なオプションがあります。

最初

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

2番目

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

違いは何ですか？どのような状況でどちらか一方を使用しますか？

htmlcssflexboxcentering
10
Skif

最初の例では...

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

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

2番目の例では...

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

コンテナレベルからアイテムを中央に配置しています。このコードは、すべてのアイテムを中央揃えにします。

また、両方の方法を同時に使用する場合は、margin: autoshould が優先されることに注意してください。

8.1。自動マージンに合わせる

justify-contentおよびalign-selfを介して位置合わせする前に、正の空き領域はその寸法の自動余白に分配されます

空き領域が自動余白に分散されている場合、曲げ後に残ったすべての空き領域が余白から盗まれるため、位置合わせプロパティはその寸法に影響を与えません。

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

この問題を解決するには、センタリングにmargin: autoを使用して正しく機能させます。

より完全な説明は次のとおりです。

IEのバグ：

8
Michael_B