Bagaimanakah Saya Boleh Membuat Tajuk Tidak Sama Saiz dalam Bekas Flex Berasingan Mempunyai Ketinggian Sama?

Ketinggian Sama Anak Barangan Flex

Masalah:
Anda mahu semua .block div adalah sama tinggi dan . div bawah benar-benar diletakkan ke bahagian bawah. Ini berfungsi, tetapi apabila tajuk h2 terlalu panjang dan mencapai 2 baris, anda mahu semua tajuk h2 baris adalah sama tinggi.

Penyelesaian:

Tidak mungkin untuk capai ini dengan flexbox atau CSS secara umum.

Gelagat lalai Flexbox ialah meregangkan item flex ke ketinggian penuh paksi silang, yang diketahui sebagai "lenturkan lajur ketinggian sama." Walau bagaimanapun, ini hanya terpakai kepada kanak-kanak bekas fleksibel, bukan kepada elemen dalam bekas berbeza.

Dalam kes ini, tajuk h2 berada dalam bekas berbeza, jadi ciri ketinggian yang sama tidak digunakan. Selain itu, penggunaan ketinggian pada item lentur mengatasi tetapan ketinggian yang sama.

Nota Tambahan:

• Lajur ketinggian yang sama hanya digunakan pada garis lentur tunggal.
• Harta align-self boleh mengatasi item-align dan memecahkan ketinggian yang sama ciri.
• Lajur ketinggian yang sama tidak berfungsi dalam bekas fleksibel berbilang baris.
• Ketinggian sama dikenakan pada lebar apabila arah lentur ialah lajur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Tajuk Tidak Sama Saiz dalam Bekas Flex Berasingan Mempunyai Ketinggian Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!