Apakah CSS Flexbox?

CSS Flexbox, atau susun atur kotak fleksibel, adalah kaedah susun atur satu dimensi yang menyediakan cara yang lebih berkesan untuk meletakkan, menyelaraskan, dan mengedarkan ruang di antara item dalam bekas, walaupun saiznya tidak diketahui atau dinamik. Diperkenalkan sebagai sebahagian daripada spesifikasi CSS3, Flexbox direka untuk menampung pelbagai jenis paparan dan untuk membuat susun atur yang lebih fleksibel dan responsif.

Idea utama di sebalik Flexbox adalah untuk membolehkan unsur -unsur melenturkan saiz mereka untuk mengisi ruang yang paling baik dalam bekas. Ini amat berguna untuk mewujudkan susun atur yang kompleks, terutamanya untuk reka bentuk responsif pada saiz skrin yang berbeza.

Konsep utama Flexbox termasuk:

• Flex Container : Elemen induk yang menggunakan display: flex atau display: inline-flex untuk menjadi bekas flex.
• Item Flex : Kanak -kanak bekas Flex, yang boleh dimanipulasi dari segi saiz, pesanan, dan penjajaran.
• Paksi utama : paksi utama di mana item flex dibentangkan. Ini boleh mendatar atau menegak.
• Salib paksi : paksi serenjang ke paksi utama.
• Ciri-ciri Flex : Ciri-ciri seperti flex-grow , flex-shrink , dan flex-basis yang mengawal bagaimana item flex tumbuh atau mengecut agar sesuai dengan bekas.

Flexbox menjadikannya lebih mudah untuk merekabentuk susun atur yang fleksibel dan responsif tanpa perlu menggunakan terapung atau kedudukan, yang sering digunakan dalam teknik CSS yang lebih tua.

Bagaimana saya boleh menggunakan Flexbox untuk membuat susun atur responsif?

Flexbox sangat berguna untuk membuat susun atur responsif kerana sifat fleksibelnya. Berikut adalah cara anda boleh memanfaatkan Flexbox untuk mencapai responsif:

1. Menyiapkan bekas Flex :
   Mulailah dengan menetapkan elemen induk sebagai bekas flex menggunakan display: flex . Ini membolehkan unsur -unsur kanak -kanak dianggap sebagai item flex.

    <code class="css">.container { display: flex; }</code>

2. Melaraskan item Flex :
   Gunakan sifat-sifat seperti flex-grow , flex-shrink , dan flex-basis untuk mengawal berapa banyak ruang setiap item harus mengambil relatif kepada yang lain. Sebagai contoh, menetapkan flex: 1 pada semua kanak -kanak akan menjadikannya tumbuh sama untuk mengisi bekas.

    <code class="css">.item { flex: 1; }</code>

3. Mengendalikan saiz skrin yang berbeza :
   Gunakan pertanyaan media untuk menyesuaikan sifat Flexbox berdasarkan saiz skrin. Sebagai contoh, anda mungkin mahu item disusun secara menegak pada skrin yang lebih kecil.

    <code class="css">@media (max-width: 600px) { .container { flex-direction: column; } }</code>

4. Menyelaraskan dan membenarkan kandungan :
   Flexbox menyediakan alat penjajaran yang kuat seperti align-items dan justify-content untuk meletakkan item di sepanjang paksi salib dan utama, masing-masing. Ini berguna untuk memusatkan kandungan atau barangan jarak sama rata.

    <code class="css">.container { align-items: center; justify-content: space-around; }</code>

5. Memesan dan menyusun semula elemen :
   Harta order membolehkan anda mengawal susunan di mana item Flex muncul, yang boleh berguna untuk menyusun semula kandungan pada saiz skrin yang berbeza tanpa mengubah struktur HTML.

    <code class="css">.item1 { order: 2; } .item2 { order: 1; }</code>

Dengan menggunakan teknik ini, anda boleh membuat susun atur yang menyesuaikan dengan lancar ke pelbagai saiz peranti dan orientasi.

Apakah perbezaan utama antara flexbox dan grid CSS?

Grid Flexbox dan CSS adalah sistem susun atur yang kuat, tetapi mereka berfungsi dengan pelbagai tujuan dan mempunyai kekuatan yang berbeza:

• Tujuan :

  • Flexbox : Direka untuk susun atur satu dimensi, sama ada berturut-turut atau lajur. Ia bagus untuk menyelaraskan item dalam bekas dan untuk susun atur berskala kecil.
  • CSS Grid : Bertujuan untuk susun atur dua dimensi, di mana anda perlu menyelaraskan kandungan kedua-dua secara mendatar dan menegak. Ia sesuai untuk susun atur yang lebih besar di mana anda memerlukan kawalan yang tepat ke atas baris dan lajur.

• Susun atur :

  • Flexbox : Excels di mengedarkan ruang secara proporsional di antara item sepanjang paksi tunggal. Ia sesuai untuk membuat reka bentuk yang fleksibel dan responsif, seperti menu navigasi atau susun atur kad.
  • CSS Grid : Membolehkan anda menentukan kedua-dua baris dan lajur, mewujudkan struktur grid yang boleh meletakkan item dengan tepat dalam ruang dua dimensi. Ia sesuai untuk susun atur kompleks, seperti susun atur majalah atau reka bentuk papan pemuka.

• Fleksibiliti :

  • Flexbox : Lebih fleksibel dari segi pengendalian kandungan dinamik, terutamanya apabila item perlu membungkus atau menukar pesanan berdasarkan saiz skrin.
  • CSS Grid : Lebih tegar dari segi struktur tetapi menawarkan kawalan yang tepat ke atas kedudukan, yang boleh berguna untuk susun atur statik atau apabila anda perlu menyelaraskan item ke grid.

• Penjajaran dan jarak :

  • Flexbox : Menawarkan pilihan penjajaran yang mantap di sepanjang paksi utama dan silang, menjadikannya mudah untuk memusatkan item atau mengedarkannya secara merata.
  • CSS Grid : Menyediakan ciri penjajaran yang sama tetapi menambah keupayaan untuk menyelaraskan item dalam sel grid lebih khusus.

• Sokongan penyemak imbas :

  • Flexbox : Disokong secara meluas di seluruh pelayar moden dengan pilihan sandaran yang baik untuk pelayar yang lebih tua.
  • CSS Grid : Disokong oleh pelayar moden, tetapi mungkin memerlukan polyfills untuk sokongan pelayar yang lebih tua.

Ringkasnya, pilih Flexbox untuk susun atur satu dimensi, fleksibel dan grid CSS untuk susun atur berasaskan grid dua dimensi yang memerlukan kedudukan yang lebih tepat.

Sokongan penyemak imbas apa yang dimiliki Flexbox?

Flexbox menikmati sokongan yang kuat di seluruh pelayar moden, tetapi sangat membantu memahami isu -isu spesifik dan potensi dengan versi yang lebih lama:

• Chrome : Sokongan penuh dari versi 29 dan seterusnya. Sokongan separa dalam versi 21-28.
• Firefox : Sokongan penuh dari versi 28 dan seterusnya. Sokongan separa dalam versi 2-27.
• Safari : Sokongan penuh dari versi 9 dan seterusnya. Sokongan separa dalam versi 3.1-8.
• Edge : Sokongan penuh dari versi 12 dan seterusnya.
• Internet Explorer : Sokongan separa dalam versi 10 dan 11. IE10 menyokong versi lama spec Flexbox, yang mungkin membawa kepada isu -isu dengan beberapa sifat.

Untuk penyemak imbas yang lebih tua yang tidak menyokong Flexbox, anda boleh melaksanakan kejatuhan menggunakan teknik susun atur lain seperti terapung atau jadual. Ramai pemaju menggunakan pengesanan ciri untuk merendahkan susun atur untuk penyemak imbas yang tidak disokong dengan anggun:

 <code class="css">@supports (display: flex) { .container { display: flex; } } /* Fallback for non-supporting browsers */ .container { display: table; }</code>

Di samping itu, awalan seperti -webkit- , -moz- , dan -ms- digunakan pada masa lalu untuk menyokong Flexbox dalam versi penyemak imbas yang lebih tua. Walau bagaimanapun, ini kebanyakannya tidak perlu sekarang sebagai pelayar moden menyokong sifat -sifat yang tidak dipraktikkan.

Dengan memahami tahap sokongan dan menggunakan sandaran yang sesuai, anda dapat memastikan susun atur Flexbox anda berfungsi di pelbagai peranti dan penyemak imbas.

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