Apakah flex susun atur fleksibel?

Flexible layout Flex ialah kaedah reka letak halaman web moden Ia menyediakan kaedah susun atur yang lebih fleksibel dan cekap serta boleh menyelesaikan banyak masalah yang sukar dikendalikan dengan kaedah susun atur tradisional. Flexbox ialah model susun atur satu dimensi yang menyusun item dalam bekas dalam satu baris atau lajur, dan melaraskan susunan item secara automatik berdasarkan saiz bekas dan ciri item tersebut. Ciri-ciri utama flex susun atur yang fleksibel termasuk: 1. Paksi utama dan paksi silang 2. Penjajaran dan pengedaran 3. Ciri-ciri item fleksibel 4. Pembalut garisan dan pelarasan saiz;

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

Susun atur fleksibel, juga dikenali sebagai Flexbox, ialah kaedah susun atur halaman web moden Ia menyediakan kaedah susun atur yang lebih fleksibel dan cekap serta boleh menyelesaikan banyak masalah yang sukar dikendalikan dengan kaedah susun atur tradisional. Flexbox ialah model susun atur satu dimensi yang menyusun item dalam bekas dalam satu baris atau lajur, dan melaraskan susunan item secara automatik berdasarkan saiz bekas dan ciri item tersebut.

Ciri utama Flexbox termasuk:

1 Paksi utama dan paksi silang: Susun atur fleksibel membahagikan bekas kepada dua arah, paksi utama dan paksi silang. Paksi utama ialah arah utama di mana item disusun, manakala paksi silang ialah arah yang berserenjang dengan paksi utama. Dengan menetapkan sifat arah lentur, anda boleh menentukan arah paksi utama, dengan itu menentukan arah susunan item.

2 Penjajaran dan pengedaran: Dalam reka letak yang fleksibel, penjajaran dan pengedaran item boleh dikawal melalui atribut justify-content dan align-item. Sifat justify-content mentakrifkan penjajaran item pada paksi utama, manakala sifat align-item mentakrifkan penjajaran item pada paksi silang. Sifat ini boleh memusatkan item secara mendatar dan menegak, mengalihkannya ke kiri atau kanan, dsb.

3 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.

4 Balutan baris dan belakang: Dengan menetapkan atribut flex-wrap, anda boleh mengawal sama ada item membalut. 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.

5 Pengagihan 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.

6 Tertib 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.

7 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.

8 Peraturan tambahan untuk bekas anjal: Untuk bekas anjal, terdapat beberapa peraturan tambahan yang perlu dipatuhi. Contohnya, bekas flex 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;.

9 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.

Flexbox ialah kaedah susun atur yang sangat berkuasa dan fleksibel yang boleh memudahkan proses susun atur halaman web dan meningkatkan kecekapan pembangunan. Dengan menggunakan Flexbox, pembangun boleh melaksanakan reka bentuk susun atur yang kompleks dengan lebih mudah dan menyesuaikan diri dengan pelbagai saiz skrin dan jenis peranti dengan lebih baik.

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