Bagaimanakah Saya Boleh Menjadikan Ketinggian Div Kanak-kanak Padanan Secara Dinamik Dengan Ketinggian Div Induknya Menggunakan Flexbox?

Mengekalkan Ketinggian Div Kanak-kanak Berbanding Div Induk

Cabaran:

Dalam reka letak web di mana div induk mengandungi div kanak-kanak dengan kandungan yang berbeza-beza, bagaimanakah ketinggian div kanak-kanak boleh dilaraskan secara dinamik agar sepadan dengan ibu bapa ketinggian div tanpa menyatakan ketinggian ibu bapa terlebih dahulu?

Penyelesaian:

Penyelesaian terletak pada penggunaan modul susun atur Flexbox, yang membolehkan saiz semula fleksibel elemen kanak-kanak.

Pelaksanaan untuk Ibu Bapa Div:

display: flex;
align-items: stretch;

Penjelasan:

• paparan: flex;: Menukar div induk ke dalam bekas flex, membolehkannya menyusun anak elemen secara mendatar atau menegak.
• align-item: regangan;: Memastikan semua elemen kanak-kanak meregang menegak untuk mengisi ketinggian bekas lentur (div induk).

Nota:

Menetapkan item penjajaran kepada nilai selain regangan akan menghalang anak div daripada sepadan dengan ketinggian ibu bapa. Selain itu, adalah penting untuk mengelakkan sebarang gaya lain yang boleh menjejaskan ketinggian atau regangan menegak div kanak-kanak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjadikan Ketinggian Div Kanak-kanak Padanan Secara Dinamik Dengan Ketinggian Div Induknya Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!