Mengapa Flex dan Flex-Grow Tidak Berfungsi pada Elemen Input dan Butang Saya?

Flex dan Flex-Grow Tidak Mengambil Kesan pada Elemen Input dan Butang

Dalam Flexbox, elemen dalam bekas boleh bersaiz dan diletakkan menggunakan sifat flex dan flex-grow. Walau bagaimanapun, sifat ini mungkin kelihatan tidak berfungsi seperti yang diharapkan apabila digunakan pada elemen input dan butang.

Sebab:

Tidak seperti DIV, elemen input dan butang mempunyai lebar lalai dan tetapan ketinggian yang mengatasi Flexbox sifat.

Ilustrasi:

[Imej menunjukkan lebar lalai yang diberikan penyemak imbas kepada elemen input]

Seperti yang dilihat dalam imej, penyemak imbas secara automatik menetapkan lebar untuk elemen input, walaupun tanpa sebarang penggayaan CSS digunakan.

Penyelesaian:

Untuk membenarkan Flexbox mengawal saiz elemen input dan butang, seseorang perlu mengalih keluar tetapan lebar dan ketinggian lalai:

input, button {
  width: auto;
  height: auto;
}

Setelah tetapan lalai ini dialih keluar, sifat flex dan flex-grow akan berkuat kuasa seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Flex dan Flex-Grow Tidak Berfungsi pada Elemen Input dan Butang Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!