Flexbox 内の兄弟間で Flex アイテムを中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

Flexbox 内の兄弟間で Flex アイテムを中央に配置するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-30 20:43:03

オリジナル

418 人が閲覧しました

How to Center a Flex Item Among Siblings in Flexbox?

他の Flex アイテムに囲まれているときに Flex アイテムを中央に配置する

Flexbox では、通常、コンテナ内の空きスペースを分配することでアイテムを配置します。したがって、兄弟の合計の長さが両側で等しくない限り、単一の flex アイテムを兄弟間で中央に配置することはできません。

回避策の 1 つは、周囲の flex アイテムを独自のコンテナ内でラップすることです。これにより、空間分布をより細かく制御できるようになり、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 ルールを調整して h2 を揃えることができます:

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

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

h2 {
  margin: auto;
}</code>

ログイン後にコピー

スパンを個別の div でラップすることで、フレックスボックスのプロパティを適用して、個々のサイズと配置を制御し、周囲の要素の数に関係なく、h2 が中央に配置されるようにすることができます。

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