Memahami Flex-Grow, Flex-Shrink, dan Flex-Basis

Sangat memahami interaksi CSS flex-grow , flex-shrink dan flex-basis sifat. Apabila kita menggunakan atribut CSS, banyak perkara berlaku di belakang tabir. Sebagai contoh, katakan kita mempunyai HTML berikut:

<div>
  <div>Kanak -kanak</div>
  <div>Kanak -kanak</div>
  <div>Kanak -kanak</div>
</div>

Kemudian kami menulis beberapa CSS:

 .paren {
  Paparan: Flex;
}

Sebenarnya, sebagai tambahan kepada baris kod CSS di atas, kami juga secara tersirat memohon satu siri atribut kepada elemen .child , seolah -olah kita menulis gaya berikut sendiri:

 . anak {
  Flex: 0 1 Auto; /* Nilai flex lalai*/
}

Ini kerana sesetengah sifat mempunyai nilai lalai yang bertujuan untuk ditindih oleh kami. Tanpa memahami gaya aplikasi tersirat ini, susun atur boleh menjadi sangat mengelirukan dan sukar untuk dikendalikan.

Atribut flex adalah atribut CSS tersendiri, yang menetapkan tiga atribut CSS bebas pada masa yang sama. Oleh itu, singkatan di atas bersamaan dengan:

 . anak {
  Flex-Grow: 0;
  flex-shrink: 1;
  Flex-Basis: Auto;
}

Atribut singkatan membungkus pelbagai atribut CSS bersama -sama, menjadikannya mudah untuk menulis pelbagai atribut sekaligus, seperti atribut background .

Walaupun sifat singkatan mungkin mengelirukan, untuk Flexbox, disyorkan untuk menggunakan singkatan kerana terdapat interaksi yang kompleks antara atribut flex dan sub-propertiesnya.

Gaya lalai sangat berguna kerana dalam kebanyakan kes kita tidak perlu mengetahui butiran sifat Flexbox ini. Sebagai contoh, apabila menggunakan Flexbox, kami biasanya menulis seperti ini:

 .paren {
  Paparan: Flex;
  Justify-Content: Space-antara;
}

Kami tidak perlu mengambil berat tentang elemen kanak -kanak atau gaya yang digunakan untuk mereka. Tetapi ini hanyalah hujung gunung es Flexbox.

Bagaimana jika kita mahu menggali jauh ke dalam bagaimana Flexbox, termasuk sifat-sifat flex-grow , flex-shrink dan flex-basis berfungsi, dan bagaimana menggunakannya untuk membuat susun atur yang lebih kompleks?

Mari kita mulakan dengan gambaran keseluruhan yang mudah dan kembali ke atribut flex lalai yang digunakan untuk elemen kanak -kanak:

 . anak {
  Flex: 0 1 Auto;
}

Gaya lalai ini memberitahu unsur -unsur kanak -kanak bagaimana untuk meregangkan dan mengecut. Saya biasanya memahami sifat singkatan ini sebagai:

 /* Bagaimana saya memikirkan peraturan di atas dalam fikiran saya*/

. anak {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

/ * atau ... */

. anak {
  flex: [maksimum] [minimum] [saiz ideal];
}

Nilai pertama flex-grow grow ke 0, yang bermaksud bahawa elemen tidak berkembang (kebanyakannya). Saiz elemen bergantung pada kandungannya. Contohnya:

 .paren {
  Paparan: Flex;
}

Jika kita menukar nilai lalai atribut flex-grow dari 0 hingga 1:

 . anak {
  Flex: 1 1 Auto;
}

Kemudian semua elemen akan sama -sama mengedarkan ruang elemen .parent , tetapi hanya jika kandungannya adalah panjang yang sama. Ini bersamaan dengan:

 . anak {
  Flex-Grow: 1;
}

Jika kita mahu salah satu elemen berkembang lebih daripada yang lain, kita boleh melakukan ini:

 .Child-Tiga {
  Flex: 3 1 Auto;
}

/ * atau ... */

.Child-Tiga {
  Flex-Grow: 3;
}

flex-shrink adalah nilai kedua dalam singkatan:

 . anak {
  Flex: 0 1 Auto; / * flex-shrink = 1 */
}

flex-shrink memberitahu penyemak imbas saiz minimum elemen. Nilai lalai adalah 1, yang bermaksud bahawa ruang yang sama sentiasa diduduki. Jika ditetapkan ke 0:

 . anak {
  Flex: 0 0 Auto;
}

Unsur tidak akan mengecut.

flex-basis adalah nilai terakhir yang ditambah kepada singkatan flex secara lalai, yang memberitahu elemen untuk mengekalkan saiz yang ideal. Nilai lalai adalah auto , yang bermaksud "menggunakan ketinggian atau lebar saya".

Apabila kami menetapkan flex-basis ke 1000px:

 .Child-Tiga {
  Flex: 0 1 1000px;
}

Kami memberitahu penyemak imbas untuk cuba mengambil 1000px ruang. Jika tidak mungkin, elemen akan mengambil ruang secara proporsional berdasarkan unsur -unsur lain.

Sekiranya kita mahu mengelakkan elemen daripada mengecut:

 .Child-Tiga {
  Flex: 0 0 1000px;
}

Menetapkan harta flex-wrap akan mengubah susun atur:

 .paren {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
}

Semua dalam semua:

• Cuba gunakan singkatan flex .
• Apabila menggunakan singkatan, ingat saiz maksimum, minimum, dan ideal.
• Kandungan elemen juga mempengaruhi bagaimana nilai -nilai ini berfungsi.

Atas ialah kandungan terperinci Memahami Flex-Grow, Flex-Shrink, dan Flex-Basis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!