Apakah peraturan susun atur yang fleksibel?

Peraturan susun atur fleksibel termasuk: 1. Pengisytiharan kontena dan item; 2. Paksi utama dan paksi silang; pelarasan saiz ; 7. Urutan paksi silang 8. Penjajaran paksi silang 9. Peraturan tambahan untuk bekas fleksibel; Pengenalan terperinci: 1. Pengisytiharan bekas dan item Dalam susun atur yang fleksibel, bekas digunakan untuk mengandungi unsur-unsur peringkat blok dan paksi silang ;3.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Peraturan susun atur anjal terutamanya merangkumi aspek berikut:

1 Pengisytiharan bekas dan barang: Dalam susun atur anjal, bekas digunakan untuk mengandungi barang. Bekas boleh terdiri daripada mana-mana elemen peringkat blok, seperti div. Dalam CSS, elemen diisytiharkan sebagai bekas flex dengan menetapkan sifat paparan kepada flex atau inline-flex. Item ialah elemen yang perlu dibentangkan dan boleh menjadi sebarang elemen kanak-kanak. Elemen yang menggunakan reka letak fleksibel secara automatik menjadi item fleksibel.

2. Paksi utama dan paksi silang: Item dalam susun atur fleksibel disusun pada paksi utama dan paksi silang. Arah paksi utama bergantung pada nilai sifat arah lentur, manakala paksi silang berserenjang dengan paksi utama. Dengan menetapkan sifat arah lentur, anda boleh menentukan arah paksi utama, dengan itu menentukan arah susunan item.

3. Penjajaran dan pengedaran: Penjajaran dan pengedaran adalah peraturan penting dalam susun atur yang fleksibel. Sifat justify-content boleh mengawal penjajaran item pada paksi utama, manakala sifat align-item boleh mengawal penjajaran item pada paksi silang. Sifat ini boleh memusatkan item secara mendatar dan menegak, mengalihkannya ke kiri atau kanan, dsb.

4. Sifat item fleksibel: Sifat item fleksibel termasuk flex-grow, flex-shrink dan flex-basis. flex-grow mentakrifkan nisbah pembesaran item apabila ruang tidak mencukupi, flex-shrink mentakrifkan nisbah pengecutan item apabila terdapat lebihan ruang, dan flex-basis mentakrifkan saiz lalai item. Sifat ini boleh digunakan untuk mengawal kebolehskalaan dan saiz semula projek.

5 Balutan garisan dan undur: Dengan menetapkan atribut flex-wrap, anda boleh mengawal sama ada item membalut atau tidak. Jika ditetapkan kepada flex-wrap: wrap, item akan balut dalam bekas. Selain itu, anda boleh menggunakan atribut flex-reverse untuk membalikkan susunan item dan melaksanakan reka letak terbalik.

6. Pengedaran ruang dan pelarasan saiz: Dengan menetapkan sifat align-content dan justify-content, anda boleh mengawal pengedaran ruang dan penjajaran item berbilang baris. Selain itu, anda juga boleh menggunakan sifat flex-basis, flex-grow dan flex-shrink untuk melaraskan saiz item untuk mencapai kesan susun atur yang lebih fleksibel.

7. Susunan paksi silang: Dalam susun atur yang fleksibel, selain ditentukan oleh arah paksi utama, susunan item juga boleh dilaraskan dengan menetapkan susunan paksi silang. Susunan item disusun boleh ditakrifkan menggunakan sifat mula lentur, hujung lentur, kiri lentur dan kanan lentur, yang menentukan kedudukan permulaan atau penamat item pada paksi silang.

8 Penjajaran paksi silang: Penjajaran paksi silang boleh ditetapkan secara individu melalui atribut align-self. Ini membolehkan kami menjajarkan item pada paksi silang, mengatasi tetapan penjajaran dalam bekas. Atribut align-self boleh ditetapkan kepada auto, flex-start, flex-end, center, baseline atau stretch.

9 Peraturan tambahan untuk bekas anjal: Untuk bekas anjal, terdapat beberapa peraturan tambahan yang perlu dipatuhi. Sebagai contoh, bekas fleksibel boleh menggunakan sifat align-item dan justify-content untuk mengawal penjajaran item. Selain itu, bekas fleksibel mempunyai sub-item tambahan: pemisah fleksibel. Pemisah ini boleh digunakan untuk mengawal jarak antara item, dan boleh digunakan untuk menjajarkan item pertama ke tepi bekas fleksibel dan item terakhir ke tepi bekas fleksibel dengan menetapkan justify-content: space-between;.

10 Bekas fleksibel bersarang: Dalam susun atur fleksibel, kami boleh meletakkan bekas fleksibel dalam bekas fleksibel lain. Dalam kes ini, bekas dalam mewarisi penjajaran bekas luar, orientasi paksi utama dan sifat pembalut. Walau bagaimanapun, paksi silang bekas dalam sentiasa berserenjang dengan paksi utama bekas luar.

Di atas adalah peraturan asas susun atur fleksibel Dengan menggunakan peraturan ini secara fleksibel, kita boleh mencapai pelbagai kesan susun atur yang kompleks. Dalam pembangunan sebenar, kami juga perlu mempertimbangkan isu keserasian penyemak imbas untuk memastikan tapak web kami boleh memaparkan dan menggunakan reka letak anjal dengan betul pada penyemak imbas dan peranti yang berbeza.

Atas ialah kandungan terperinci Apakah peraturan susun atur yang fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!