Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memusatkan Item Flex di Kalangan Adik Beradik dalam Flexbox?

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

Barbara Streisand
Barbara Streisandasal
2024-10-30 20:43:03287semak imbas

How to Center a Flex Item Among Siblings in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn