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

他のフレックス アイテムに囲まれているときにフレックス アイテムをコンテナ内で中央に配置する

他のフレックス アイテムに囲まれている場合に、フレックス アイテムをコンテナ内の中央に配置するには

従来の方法

• justify-content と margin を使用する: auto:中央の項目の両側にフレックス項目を配置する場合、これらのプロパティで効果的に位置を揃えることができます。

代替アプローチ

• 長さを含めてバランスをとる: 中央にあるアイテムを別のフレックス コンテナでラップし、両側の兄弟フレックス アイテムの全長が同じになるようにします。これにより、中央に配置された項目が残りのスペースを占有し、中央に配置されます。

コード例

次の例では、h2 は次を使用して正しく中央に配置されます。代替アプローチでは、両側のスパン項目の合計長が同じになるようにします。

HTML:

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

CSS:

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

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

h2 {
  flex: 0 0 auto;
  margin: auto;
}</code>

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