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 bekas

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

flex-wrap: Cara membalut, boleh nowrap (tiada line wrap), wrap (line wrap), wrap-reverse (line wrap dan reverse).

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

item-align: Penjajaran pada paksi silang, yang boleh menjadi flex-start (menjajarkan mula), flex-end (alignment end), tengah (center alignment), garis dasar (baseline alignment), regangan (regang untuk mengisi bekas ).
• kandungan-sejajar: Dalam kes berbilang garisan, penjajaran setiap garisan pada paksi silang boleh menjadi flex-start (menjajarkan mula), flex-end (menjajarkan hujung), tengah (menjajarkan tengah), ruang-antara ( dua dijajar hujung, dengan jarak yang sama antara baris), ruang sekeliling (jarak yang sama pada kedua-dua belah setiap baris), regangan (diregangkan untuk mengisi bekas).
• 1.2 Atribut item Flex
Item Flex mengawal reka letaknya sendiri melalui beberapa atribut yang biasa digunakan termasuk:
• flex-grow: Menentukan nisbah pembesaran item lalainya.

flex-shrink: Nyatakan nisbah pengecutan item, lalai ialah 1, iaitu jika ruang tidak mencukupi, item akan mengecut.

flex-basis: Mentakrifkan ruang paksi utama yang diduduki oleh item sebelum memperuntukkan lebihan ruang.

flex: ialah singkatan daripada flex-grow, flex-shrink dan flex-basis. Nilai lalai ialah 0 1 auto.
• align-self: Membenarkan satu item dijajarkan secara berbeza daripada item lain pada paksi silang.
• 2. Kemahiran aplikasi reka letak Flex
Reka letak fleksibel mempunyai banyak kemahiran yang boleh membantu kami mengendalikan reka letak dengan lebih baik dalam aplikasi praktikal.
• 2.1 Susun atur ketinggian sama
• Menggunakan reka letak Flex, anda boleh melaksanakan susun atur ketinggian sama dengan mudah Anda hanya perlu menetapkan item penjajaran: regangan pada bekas untuk menjadikan semua item Flex menduduki ketinggian yang sama pada paksi silang.

Kod contoh:

.container {
  display: flex;
  align-items: stretch;
}

2.2 Pempusatan mendatar

Untuk mencapai penjajaran tengah mendatar, cuma tetapkan justify-content: tengah pada bekas.

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:

Artikel ini memperkenalkan konsep asas dan sifat umum susun atur elastik CSS Flex secara terperinci, dan juga berkongsi beberapa kemahiran aplikasi biasa. Kami berharap pengenalan dalam artikel ini dapat membantu pembaca lebih memahami dan menggunakan reka letak Flex serta meningkatkan keberkesanan reka letak halaman web dan kecekapan pembangunan.

Rujukan:

Css Trik - Panduan Lengkap untuk Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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!