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

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

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

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

Kod contoh:

.container {
  display: flex;
  justify-content: center;
}

2.3 Pempusatan menegak

Kod sampel:

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

2.4 Lajur kiri dan kanan adaptif

Kod sampel:

.container {
  display: flex;
}

.left {
  flex: 0 0 200px; /* 左栏宽度为200px */
}

.right {
  flex: 1; /* 右栏自适应宽度 */
}

2.5 Pelarasan pesanan

Contoh kod:

.container {
  display: flex;
}

.first {
  order: 2; /* 放到第二位 */
}

.second {
  order: 1; /* 放到第一位 */
}

Kesimpulan:

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!