Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian boleh skala, sama tinggi, sama lebar, sama jarak

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian yang sama tinggi, lebar sama, jarak yang sama, anda memerlukan contoh kod khusus

Flexbox ialah mod susun atur baharu yang diperkenalkan dalam CSS3 yang boleh mencapai susun atur model kotak fleksibel. Ia adalah singkatan kepada Kotak Fleksibel, yang bermaksud susun atur fleksibel. Susun atur Flexbox secara automatik boleh melaraskan kedudukan dan saiz elemen mengikut saiz bekas untuk mencapai pelbagai susunan fleksibel.

Buat bekas susun atur
1. Pertama, anda perlu mencipta bekas yang mengandungi elemen yang hendak dibentangkan . Dalam HTML, anda boleh menggunakan elemen div sebagai bekas. Untuk menetapkan bekas kepada reka letak Flexbox, anda perlu menambah kod berikut pada atribut gaya bekas:
   

Salin selepas log masuk

Tetapkan arah reka letak elemen # #Dalam bekas, Anda perlu menentukan arah susun atur elemen, yang boleh mendatar atau menegak. Secara lalai, elemen disusun secara mendatar. Jika anda perlu menyusun secara menegak, anda boleh menambah kod berikut dalam atribut gaya bekas:
2. 
   

   Salin selepas log masuk

Unsur dalam susun atur Flexbox boleh Memperuntukkan ruang yang tinggal mengikut nisbah penskalaan yang ditetapkan. Secara lalai, nisbah penskalaan elemen ialah 0, yang bermaksud tiada penskalaan. Anda boleh menambah kod berikut pada atribut gaya elemen untuk menetapkan nisbah penskalaan elemen:
3. 
   

   Salin selepas log masuk
Dalam contoh ini, nisbah penskalaan elemen div pertama ialah 1, dan nisbah penskalaan bagi div kedua Nisbah penskalaan elemen ialah 2. Iaitu, elemen pertama menduduki 1/3 ruang, dan elemen kedua menduduki 2/3 ruang.

Susun atur Flexbox boleh dengan mudah mencapai susun atur ketinggian yang sama dan lebar yang sama. Tambahkan kod berikut pada atribut gaya elemen untuk mencapai kesan ketinggian yang sama dan lebar yang sama:
4. 
   

   Salin selepas log masuk
Dalam contoh ini, nisbah penskalaan bagi tiga elemen div ialah 1, dan mereka akan sama-sama membahagikan ruang bekas untuk mencapai kesan ketinggian yang sama dan lebar yang sama.

Dalam reka letak Flexbox, anda boleh menetapkan jarak elemen melalui sifat justify-content dan align-item. Sifat justify-content digunakan untuk menetapkan jarak dalam arah mendatar, dan sifat item align digunakan untuk menetapkan jarak dalam arah menegak. Nilai yang boleh ditetapkan untuk kedua-dua sifat ini ialah: flex-start, flex-end, tengah, ruang-antara dan ruang-keliling.
5. 
   

   Salin selepas log masuk
Dalam contoh ini, jarak antara dua elemen div diagihkan sama rata dan saiz khusus jarak ditentukan oleh ruang bekas.

3. Keserasian penyemak imbas bagi reka letak Flexbox

4. Contoh kod

    
  
 
Item 1
 
Item 2
 
Item 3
 
  

Kod di atas melaksanakan contoh susun atur Flexbox. Terdapat tiga elemen kanak-kanak dengan ketinggian yang sama dan jarak yang sama dalam bekas. Ketinggian bekas adalah nilai tetap dan dipaparkan secara menegak di tengah-tengah bekas.

Ringkasan:

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian boleh skala, sama tinggi, sama lebar, sama jarak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!