Bagaimana Memadankan Div Kanak-kanak dengan Ketinggian Ibu Bapanya Menggunakan Flexbox Tanpa Menentukan Ketinggian Ibu Bapa?

Cara Membuat Div Anak Padan dengan Ketinggian Div Induknya Tanpa Menentukan Ketinggian Ibu Bapa

Apabila bekerja dengan struktur div bersarang seperti yang disediakan, selalunya diingini agar anak div dijajarkan secara menegak dalam induknya, tanpa mengira kandungan ketinggian. Bagaimanakah kita boleh mencapai ini?

Penyelesaian terletak pada penggunaan Flexbox dengan konfigurasi yang betul. Dengan menetapkan div induk supaya mempunyai gaya paparan: flex, kami mendayakan reka letak Flexbox untuk anak-anaknya.

Flexbox membolehkan kami menjajarkan item dalam bekas flex. Untuk memastikan div kanak-kanak meregang secara menegak agar sepadan dengan ketinggian div induk, kita perlu menetapkan align-items: stretch. Ini memberitahu penyemak imbas untuk mengagihkan sebarang ruang yang tersedia secara menegak dalam bekas, menjadikan div kanak-kanak memenuhi ketinggian ibu bapa.

.parent {
  display: flex;
  align-items: stretch;
}

Perlu ambil perhatian bahawa ketinggian div induk tidak memerlukan untuk dinyatakan secara eksplisit untuk teknik ini berfungsi. Flexbox mengira dan mengagihkan ruang secara automatik berdasarkan kandungan yang tersedia. Ini menyediakan penyelesaian reka letak yang dinamik dan fleksibel yang menyesuaikan diri dengan pelbagai saiz kandungan.

Berikut ialah contoh struktur HTML untuk menggambarkan konsep:

<div class="parent">
  <div class="child"></div>
</div>

Dengan tetapan Flexbox yang sesuai, div kanak-kanak akan skala secara automatik untuk memadankan ketinggian div induk, tanpa mengira kandungan kanak-kanak.

Atas ialah kandungan terperinci Bagaimana Memadankan Div Kanak-kanak dengan Ketinggian Ibu Bapanya Menggunakan Flexbox Tanpa Menentukan Ketinggian Ibu Bapa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!