Apakah Maksud `flex: 1` dalam CSS Flexbox?

Memahami Hartanah Flexbox: Apakah "flex: 1" Mewakili?

Sifat flex, singkatan mudah untuk flex-grow, flex-shrink, dan flex-basis, membolehkan kawalan susun atur yang fleksibel. Walaupun nilai lalai ialah "0 1 auto," adalah perkara biasa untuk menemui "flex: 1" dalam amalan.

Ini menimbulkan persoalan: apakah maksud "flex: 1" sebenarnya? Adakah ia ditafsirkan sebagai "1 1 auto" atau "1 0 auto"?

Untuk menjelaskannya, "flex: 1" mewakili yang berikut:

• flex-grow: 1

  • Div yang berkaitan akan berkembang secara berkadar dengan tetingkap saiz.

• flex-shrink: 1

  • Div akan mengecut secara berkadaran dengan saiz tingkap.

• asas lentur: 0

  • Div tidak mempunyai nilai permulaan yang jelas dan akan menduduki ruang skrin berdasarkan perkadaran yang tersedia.
  • Sebagai contoh, jika tiga div terkandung dalam pembungkus, setiap satu akan menuntut lebih kurang 33% daripada lebar skrin.

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