Flex, Box atau Flexbox: Nilai Paparan Mana Yang Perlu Anda Gunakan?

Model Kotak Fleksibel: Menavigasi Nilai 'flex', 'box' dan 'flexbox'

Kemunculan model kotak fleksibel memperkenalkan anjakan paradigma dalam CSS3, menghapuskan secara berperingkat 传统的 属性值，seperti sebaris dan blok. Walau bagaimanapun, model kotak fleksibel sering dipersembahkan dengan pelbagai nilai, termasuk flex, box dan flexbox. Artikel ini menyelidiki perbezaan antara nilai ini dan memberikan panduan tentang penggunaannya.

Paparan: flex

Paparan: flex ialah nilai standard semasa. Ia menyokong penyemak imbas moden, termasuk Chrome 29 , Firefox 22 , Safari 7 dan Internet Explorer 11 . Flex menyediakan keupayaan lanjutan untuk pengurusan reka letak, termasuk keupayaan untuk menjajarkan dan mengagihkan item di sepanjang kedua-dua paksi mendatar dan menegak.

Paparan: kotak

Paparan: kotak adalah lebih lama nilai yang telah diperkenalkan sebelum ini dalam pembangunan model kotak fleksibel. Ia disokong dalam kebanyakan penyemak imbas utama dengan awalan vendor tetapi secara amnya ditamatkan secara berperingkat memihak kepada paparan: flex.

Paparan: flexbox

Paparan: flexbox ialah satu lagi nilai perantaraan yang diperkenalkan untuk merapatkan peralihan daripada paparan: kotak ke paparan: flex. Ia disokong dalam penyemak imbas yang lebih baharu dengan awalan vendor dan serupa dengan paparan: fleksibel dari segi kefungsian.

Nilai Mana yang Perlu Digunakan?

Akhirnya, pilihan antara ini nilai bergantung pada penyemak imbas yang anda perlukan untuk menyokong. Jika anda memerlukan keserasian ke belakang, pertimbangkan untuk menggunakan kotak paparan: dengan awalan penyemak imbas. Untuk sokongan penyemak imbas yang lebih moden, paparan: flex ialah pilihan yang disyorkan.

Nota Tambahan

• Spesifikasi kotak berbeza dengan ketara daripada spesifikasi flexbox/flex dan mungkin tidak selalunya sesuai untuk mencapai hasil yang diingini.
• Sesetengah penyemak imbas mungkin menyokong berbilang nilai paparan. Walau bagaimanapun, adalah disyorkan untuk memasukkan sifat flex apabila mungkin untuk kalis masa hadapan.
• Semak caniuse.com/#feat=flexbox untuk mendapatkan maklumat sokongan penyemak imbas yang komprehensif.

Atas ialah kandungan terperinci Flex, Box atau Flexbox: Nilai Paparan Mana Yang Perlu Anda Gunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!