Mengapa `display: flex` tidak berfungsi pada `` Elemen?

Mengapa Elemen Fieldset Tidak Berkelakuan Sebagai Bekas Fleksibel

Menggayakan elemen set medan dengan paparan: flex atau paparan: inline-flex boleh menyebabkan anda menggaru kepala kerana ia berkelakuan berbeza daripada yang dijangkakan. Daripada bertindak sebagai bekas yang fleksibel, ia berkelakuan serupa dengan elemen sekat atau sekatan sebaris, masing-masing.

Pepijat atau Tingkah Laku yang Dijangka?

Tingkah laku ini dalam Firefox dan Chrome (semasa bekerja dalam IE secara mengejutkan) bukanlah pepijat. Menurut Bug 984869, elemen butang diberikan dengan pengendalian khas dan mungkin mengabaikan sifat CSS seperti paparan. Tingkah laku ini bukan unik untuk butang; set medan, jadual dan elemen del juga mempamerkan keabnormalan pemaparan yang serupa.

Penyelesaian

Untuk membentangkan anak elemen set medan dengan pasti seperti yang dinyatakan dalam Reka Letak Kotak Fleksibel CSS , anda perlu menggunakan penyelesaian: bungkus elemen anak anda di dalam bekas div dalam set medan. Pendekatan ini berfungsi secara konsisten merentas penyemak imbas, memastikan reka letak yang diingini dalam semua kes.

Firefox 46 and Beyond

Walau bagaimanapun, terdapat berita baik untuk pengguna Firefox: Firefox 46 dan lebih baharu pelaksanaan menyokong Flexbox untuk elemen set medan (lihat pepijat 1230207). Ini bermakna anda boleh menggunakan paparan: flex pada set medan tanpa memerlukan penyelesaian.

Atas ialah kandungan terperinci Mengapa `display: flex` tidak berfungsi pada `` Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!