Bagaimanakah Saya Boleh Membuat Barangan Flex Berkembang Secara Berkadar Berdasarkan Saiz Asalnya?

Memperluas Item Flex Secara Berkadaran dengan Saiz Asalnya

Untuk memastikan item flex mengembang secara seragam sambil mengekalkan lebar relatifnya, laraskan dari flex: 1 untuk melenturkan: auto. Suis ini mengubah pengiraan saiz, memfaktorkan saiz kandungan.

Memahami Flex-grow dan Flex-basis

Flex-grow, seperti namanya, meningkatkan saiz item berdasarkan nilai yang ditentukan dan ruang kosong yang tersedia. Walau bagaimanapun, adalah penting untuk mempertimbangkan peranan asas-flex, yang menentukan saiz awal sesuatu item.

Saiz Relatif lwn. Mutlak

Apabila asas-flex ditetapkan kepada 0, flex-grow menganggap semua ruang sebagai ruang kosong untuk pengedaran, menghasilkan saiz mutlak di mana item adalah sama lebar tanpa mengira kandungan.

Sebaliknya, jika asas-flex ialah auto (lalai), saiz kandungan dipertimbangkan sebelum mengira ruang kosong. Ini membolehkan saiz relatif, di mana hanya ruang tambahan diagihkan secara berkadar.

Pecahan Nilai Fleksibel

• flex: 1: Shorthand untuk flex-grow: 1 ( saiz mutlak)
• flex-grow: 1: Saiz relatif, pemfaktoran dalam kedua-dua saiz kandungan dan ruang yang tersedia
• flex: auto: Setara dengan flex-grow: 1 / flex-shrink: 1 / flex-basis: auto, yang juga merupakan saiz relatif

Dengan menggunakan flex: auto, butang akan meningkat dalam saiz untuk mengisi baki lebar baris sambil mengekalkan nisbah saiz asalnya. Ini akan memastikan bahawa butang terluas kekal lebih lebar daripada yang lain, walaupun apabila dikembangkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Barangan Flex Berkembang Secara Berkadar Berdasarkan Saiz Asalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!