Flex アイテムをコンテナ内で他の Flex アイテムの中央に配置するにはどうすればよいですか?

追加のフレックス アイテムを使用してコンテナ内でフレックス アイテムを中央に配置する

フレックス配置プロパティは、コンテナ内の未占有スペースを割り当てます。したがって、隣接する項目の合計幅がコンテナの幅と等しくない限り、他の項目に囲まれたフレックス項目を自動的に中央に配置することは不可能です。

提供されている 2 番目の例を考えてみましょう。スパン要素の合計幅は、h2 要素の両側で等しくなります。その結果、h2 はコンテナーの中央に完全に配置されます。

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>

以上がFlex アイテムをコンテナ内で他の Flex アイテムの中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。