Bagaimana untuk Memusatkan Item Flex di Kalangan Adik Beradik dalam Flexbox?

Memusatkan Item Flex Apabila Dikelilingi oleh Item Flex Lain

Dalam Flexbox, menjajarkan item biasanya dicapai dengan mengagihkan ruang kosong dalam bekas. Oleh itu, memusatkan satu item lentur dalam kalangan adik-beradik tidak boleh dilakukan melainkan gabungan panjang adik-beradik adalah sama pada kedua-dua belah pihak.

Salah satu penyelesaian ialah membungkus item lentur di sekeliling dalam bekas mereka sendiri. Ini membolehkan kawalan yang lebih besar ke atas pengagihan ruang dan membolehkan pemusatan elemen h2. Pertimbangkan struktur HTML yang diubah suai berikut:

<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>

Dengan pengubahsuaian ini, peraturan CSS boleh dilaraskan untuk menyelaraskan 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>

Dengan membalut rentang dalam div berasingan, sifat flexbox boleh digunakan untuk mengawal saiz dan penjajaran individunya, memastikan h2 kekal berpusat, tanpa mengira bilangan elemen sekeliling.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Item Flex di Kalangan Adik Beradik dalam Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!