Bagaimanakah `flex-shrink` Berinteraksi dengan Padding dan `box-sizing: border-box`?

Bagaimanakah faktor pengecutan fleksibel dalam padding dan kotak sempadan?

Sifat pengecutan fleksibel Flexbox menentukan cara saiz elemen dikurangkan apabila ruang kosong perlu diagihkan antara item fleksibel. Walau bagaimanapun, tingkah lakunya boleh berbeza-beza bergantung pada kehadiran padding dan nilai saiz kotak.

Flex-shrink tanpa padding

Sekiranya tiada padding, pengiraan untuk flex-shrink adalah mudah. . Ruang kosong negatif diagihkan antara item flex berdasarkan nilai pengecutan flex dan saiz awalnya.

Pengecutan lentur dengan padding

Apabila padding ditambahkan pada item flex, pengiraan menjadi lebih kompleks . Ruang yang tersedia untuk item flex dikurangkan dengan jumlah padding. Ruang yang dikecilkan ini kemudiannya diagihkan antara item berdasarkan faktor pengecutan lentur berskalanya.

Pesaiz kotak dan pelapik

Sifat saiz kotak mempengaruhi cara saiz elemen dikira, termasuk penggunaan padding. Apabila saiz kotak ditetapkan kepada kotak sempadan, lebar dan tinggi yang ditentukan termasuk pelapik. Oleh itu, saiz awal item flex dengan padding akan lebih besar daripada tanpa padding.

Pengiraan flex-shrink laras dengan padding dan border-box

Apabila kedua-dua padding dan box-sizing: border -kotak hadir, pengiraan untuk pengecutan-flex diselaraskan untuk mengambil kira faktor-faktor ini. Langkah-langkah yang terlibat ialah:

1. Kira faktor pengecutan lentur berskala untuk item lentur yang tidak dibekukan. Ini melibatkan pendaraban nilai pengecutan lentur dengan saiz asas lentur dalam, iaitu saiz yang ditentukan tolak sebarang padding dan lebar jidar.
2. Cari jumlah faktor pengecutan lentur berskala untuk semua item lentur yang tidak dibekukan.
3. Untuk setiap item lentur yang tidak dibekukan, tentukan nisbahnya dengan membahagikan faktor pengecutan lentur berskalanya dengan jumlah semua faktor pengecutan lentur berskala.
4. Tetapkan saiz utama sasaran setiap item kepada saiz asas lenturnya tolak sebahagian kecil daripada ruang bebas negatif yang berkadar dengan nisbahnya. Pecahan ini dikira sebagai nisbah didarab dengan ruang kosong negatif.
5. Laraskan saiz pengiraan setiap item lentur berdasarkan saiz asas lentur dalam dan luar serta pelapik, menghasilkan lebar akhir item dengan padding.

Kesimpulan

Memahami bagaimana flex-shrink berinteraksi dengan pelapik dan saiz kotak adalah penting untuk mengawal susun atur bekas fleksibel. Dengan mengambil kira faktor ini, pembangun boleh mencapai reka letak yang tepat dan fleksibel yang memenuhi keperluan reka bentuk mereka.

Atas ialah kandungan terperinci Bagaimanakah `flex-shrink` Berinteraksi dengan Padding dan `box-sizing: border-box`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!