Apakah Sebenarnya `flex: 1` Lakukan dalam CSS?

Memahami flex: 1

Dalam bidang CSS, sifat flex memainkan peranan penting dalam mengawal reka letak dan pengedaran elemen dalam bekas lentur. Secara lalai, ia menganggap nilai 0 1 auto, menetapkan nilai masing-masing kepada flex-grow, flex-shrink dan flex-basis.

Walau bagaimanapun, penggunaan biasa timbul apabila flex: 1 digunakan. Penamaan singkatan ini menimbulkan persoalan tentang niatnya yang sebenar.

Fleks penyahkodan: 1

Kekeliruan berpunca daripada pelbagai tafsiran fleksibel: 1. Ada yang menganggap ia menandakan 1 1 auto , manakala yang lain membuat spekulasi 1 0 auto sebagai setara dengannya.

Walau bagaimanapun, andaian tidak betul. flex: 1 sebenarnya mewakili yang berikut:

• flex-grow: 1: Elemen akan mengembang mengikut kadar ruang yang tersedia dalam bekas flex. Apabila bekas membesar, elemen itu juga akan berkembang.
• flex-mengecut: 1: Elemen akan mengecut secara berkadar sebagai tindak balas kepada pengecutan bekas. Jika ruang menjadi terhad, elemen akan mengecut untuk menampung elemen lain dalam bekas.
• asas fleksibel: 0: Elemen tidak mempunyai saiz permulaan yang ditentukan dan akan mengambil ruang secara dinamik berdasarkan saiz skrin atau tetingkap yang tersedia. Ia akan melaraskan dimensinya apabila bekas atau port pandang diubah saiznya.

Pada asasnya, flex: 1 memastikan elemen itu menduduki ruang secara sama rata dengan elemen lain dalam bekas fleksibel, membolehkan kedua-dua pertumbuhan dan pengecutan dikekalkan pengagihan yang seimbang. Tingkah laku fleksibel ini biasanya digunakan untuk reka bentuk responsif di mana elemen perlu menyesuaikan diri dengan saiz skrin yang berbeza, memastikan reka letak yang harmoni untuk pelbagai resolusi peranti.

Atas ialah kandungan terperinci Apakah Sebenarnya `flex: 1` Lakukan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!