周囲に不均一な要素があるコンテナ内でフレックス アイテムを中央に配置するにはどうすればよいですか?

コンテナ内でフレックス アイテムを他のフレックス アイテムの中央に配置する

チャレンジ:

を中央に配置するフレックスコンテナ内で、さまざまな数の で囲まれています。 elements.

アプローチ:

フレックス配置プロパティはコンテナー内の空きスペースを分散するため、追加の手段がなければ、不均一な兄弟間で 1 つのアイテムを中央に配置することは困難です。

考察:

アイテムの両側で周囲の要素の長さの合計が等しい場合、センタリングが可能になります。

解決策:

を囲みます。

内で;

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <div>
    <h2>I'm an h2</h2>
  </div>
  <div>
    <span>I'm span 3</span>
  </div>
</div></code>

ログイン後にコピー

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  flex: 1 1 auto;  // Equalize flex sizing
  text-align: center;
}

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>

ログイン後にコピー

説明:

内部の

の flex プロパティを設定することで、コンテナの全長が残りのコンテンツと同じになるようにします。コンテナを「1 1 auto」に設定すると、フレックス コンテナ内で等しいスペースを占有します。

の flex プロパティは「0 0 auto」に設定され、フレックス スペースの分布から除外されます。マージン自動により、

が保証されます。

内の中央に配置されます。コンテナ。

追加の洞察:

• 要素はそれぞれの
  内で中央に配置されます。
• このアプローチでは、

  が中央に配置されます。ただし、周囲のコンテンツの長さが動的である場合には適さない可能性があります。