Bagaimana untuk Memusatkan Item Flex dalam Bekas Apabila Dikelilingi oleh Item Flex Lain?

Pusat Item Flex dalam Bekas Apabila Dikelilingi oleh Item Flex Lain

Untuk memusatkan item flex dalam bekas, apabila dikelilingi oleh item flex lain , pertimbangkan perkara berikut:

Kaedah Konvensional

• Menggunakan justify-content dan margin: auto: Apabila terdapat jumlah panjang yang sama item lentur pada kedua-dua belah item berpusat, sifat ini boleh menyelaraskannya dengan berkesan.

Pendekatan Alternatif

• Mengandungi dan Mengimbangi Panjang : Balut item berpusat dalam bekas fleksibel yang berasingan dan pastikan jumlah panjang item flex adik-beradik yang sama pada kedua-dua sisi. Ini memaksa item berpusat untuk menduduki ruang yang tinggal dan menjajarkan ke tengah.

Kod Contoh

Dalam contoh berikut, h2 dipusatkan dengan betul menggunakan pendekatan alternatif, memastikan jumlah panjang item span yang sama pada kedua-dua belah pihak.

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 id="I-m-an-h">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>

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Item Flex dalam Bekas Apabila Dikelilingi oleh Item Flex Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!