Bagaimana untuk Memusatkan Item Flex dalam Bekas dengan Elemen Sekitar Tidak Sekata?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-11-01 02:45:28

asal

326 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mendapatkan Ketinggian Div Tanpa Peraturan Ketinggian CSS Ditakrifkan? Artikel seterusnya：Bagaimanakah anda menjajarkan elemen `` secara menegak dalam ``?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2204

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2349

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1967

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...