Rumah > Artikel > hujung hadapan web > Bagaimana untuk Memusatkan Item Flex dalam Bekas dengan Elemen Sekitar Tidak Sekata?

Bagaimana untuk Memusatkan Item Flex dalam Bekas dengan Elemen Sekitar Tidak Sekata?

Barbara Streisandasal: 2024-11-01 02:45:28217semak imbas

How to Center a Flex Item in a Container with Uneven Surrounding Elements?

Memusatkan Item Flex dalam Bekas di Tengah-tengah Item Flex Lain

Cabaran:

Memusatkan

dalam bekas fleksibel sambil dikelilingi oleh pelbagai bilangan elemen.

Pendekatan:

Memandangkan sifat penjajaran fleksibel mengagihkan ruang kosong dalam bekas, memusatkan satu item dalam kalangan adik-beradik yang tidak sekata adalah mencabar tanpa langkah tambahan.

Pertimbangan:

Apabila jumlah panjang elemen sekeliling adalah sama pada kedua-dua belah item, pemusatan menjadi mungkin.

Penyelesaian:

Balut

dalam

bekas, memastikan jumlah panjang sama dengan kandungan yang tinggal.

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

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

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

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>

Penjelasan:

Dengan menetapkan sifat lentur

bekas ke "1 1 auto," mereka menduduki ruang yang sama dalam bekas fleksibel. Sifat fleksibel

ditetapkan kepada "0 0 auto," tidak termasuk daripada pengagihan ruang fleksibel. Auto jidar memastikan

berpusat di dalam
bekas.

Pemahaman Tambahan:

elemen berpusat dalam
bekas disebabkan oleh sifat penjajaran teks.

Sementara pendekatan ini memusatkan
dengan sempurna, ia mungkin tidak sesuai jika panjang kandungan di sekeliling adalah dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Item Flex dalam Bekas dengan Elemen Sekitar Tidak Sekata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
if while auto Length Property this margin flex
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

Artikel sebelumnya：Bagaimana untuk Mendapatkan Ketinggian Div Tanpa Peraturan Ketinggian CSS Ditakrifkan?Artikel seterusnya：Bagaimana untuk Mendapatkan Ketinggian Div Tanpa Peraturan Ketinggian CSS Ditakrifkan?

Artikel berkaitan

Lihat lagi