Rumah > Artikel > hujung hadapan web > Penjelasan terperinci mengenai susun atur fleksibel CSS Flex dan teknik aplikasinya
. sesuai dengan saiz bekas yang berbeza. Gunakan reka letak Flex untuk melaksanakan reka letak halaman web yang kompleks dengan cepat dengan responsif yang baik.
1. Konsep asas reka letak Flex
Susun atur fleksibel terdiri daripada elemen bekas dan anak Bekas ialah elemen dengan atribut paparan:flex atau paparan:inline-flex, dan elemen anak dipanggil item Flex. 1.1 Sifat bekasBekas mengawal susun atur item Flex melalui beberapa sifat yang biasa digunakan termasuk:
arah-flex: Tetapkan arah paksi utama, yang boleh menjadi baris (arah mendatar), lajur (arah menegak. ), baris- terbalik (terbalik secara mendatar), lajur-terbalik (terbalik secara menegak).
justify-content: Kaedah penjajaran pada paksi utama, yang boleh menjadi flex-start (menjajarkan mula), flex-end (menjajarkan hujung), tengah (menjajarkan tengah), ruang-antara (menjajarkan pada kedua-dua hujung, selang yang sama antara item) ), ruang sekeliling (jarak yang sama pada kedua-dua belah setiap item).
flex-basis: Mentakrifkan ruang paksi utama yang diduduki oleh item sebelum memperuntukkan lebihan ruang.
.container { display: flex; align-items: stretch; }
Kod contoh:
.container { display: flex; justify-content: center; }
2.3 Pempusatan menegak
Untuk mencapai penjajaran tengah menegak, cuma tetapkan item penjajaran: tengah pada bekas.
Kod sampel:
.container { display: flex; align-items: center; }
2.4 Lajur kiri dan kanan adaptif
Lebar lajur kiri ditetapkan, dan lajur kanan adalah adaptif mengikut baki lebar bekas.
Kod sampel:
.container { display: flex; } .left { flex: 0 0 200px; /* 左栏宽度为200px */ } .right { flex: 1; /* 右栏自适应宽度 */ }
2.5 Pelarasan pesanan
Susun atur fleksibel membolehkan melaraskan susunan item Flex melalui atribut pesanan.
Contoh kod:
.container { display: flex; } .first { order: 2; /* 放到第二位 */ } .second { order: 1; /* 放到第一位 */ }
Kesimpulan:
Dengan menggunakan sifat dan teknik reka letak Flex secara fleksibel, kami boleh dengan mudah melaksanakan pelbagai susun atur halaman web yang kompleks dengan responsif yang baik. Menguasai reka letak Flex akan meningkatkan keupayaan susun atur CSS kami.
Ringkasan:
MDN Web Docs - Flexbox: https:// /developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Atas ialah kandungan terperinci Penjelasan terperinci mengenai susun atur fleksibel CSS Flex dan teknik aplikasinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!