Petua pengoptimuman sifat reka letak fleksibel CSS: align-item dan align-self

Kemahiran pengoptimuman atribut reka letak fleksibel CSS: align-item dan align-self

Dalam pembangunan web moden, reka letak fleksibel (Flexbox) telah menjadi kaedah reka letak yang sangat popular dan berkuasa. Reka letak fleksibel bukan sahaja menjadikan reka letak halaman lebih fleksibel dan responsif, tetapi juga memudahkan susunan dan penjajaran elemen untuk pembangun. Antaranya, dua atribut susun atur fleksibel align-item dan align-self memainkan peranan penting dalam pengoptimuman reka letak halaman web.

align-item ialah atribut yang digunakan untuk mengawal penjajaran paksi menegak (arah menegak) elemen dalam bekas fleksibel, dan align-self ialah atribut yang digunakan untuk mengawal penjajaran paksi menegak setiap elemen anak dalam bekas fleksibel. Di bawah ini kami akan memperkenalkan kedua-dua sifat ini secara terperinci dan memberikan beberapa contoh kod khusus.

1. Atribut align-item

Atribut align-item digunakan pada bekas fleksibel (bekas fleksibel) dan digunakan untuk mengawal penjajaran semua sub-elemen dalam bekas dalam arah paksi menegak. Ia boleh menerima nilai berikut:

1. flex-start: Elemen kanak-kanak dijajarkan di bahagian atas pada paksi menegak
2. flex-end: Elemen kanak-kanak dijajarkan di bahagian bawah pada paksi menegak; Elemen kanak-kanak dijajarkan pada paksi menegak dijajarkan ke tengah dalam arah
3. garis dasar: Elemen kanak-kanak dijajarkan dengan garis dasar dalam arah paksi menegak
4. regangan: Elemen kanak-kanak diregangkan dalam arah paksi menegak untuk diisi keseluruhan bekas.
5. Berikut ialah contoh khusus yang menunjukkan cara menggunakan atribut align-item untuk tetapan penjajaran:

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

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Dalam contoh di atas, kami menggunakan align-item: tengah ke tengah jajarkan elemen anak dalam arah paksi menegak.

2. Atribut align-self

Atribut align-self digunakan pada setiap elemen kanak-kanak dalam bekas fleksibel dan digunakan untuk mengawal penjajaran setiap elemen kanak-kanak dalam arah paksi menegak. Nilainya adalah sama seperti item align dan boleh mengatasi penjajaran yang ditetapkan oleh item align.

Berikut ialah contoh konkrit yang menunjukkan cara menggunakan atribut align-self untuk menetapkan penjajaran bagi setiap elemen kanak-kanak secara individu:

.flex-container {
  display: flex;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  align-self: flex-end;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Dalam contoh di atas, kami menjajarkan elemen anak kedua di flex-end melalui align-self: flex -hujung Jajaran bawah di sepanjang paksi menegak, manakala elemen anak lain kekal di tengah.

Kesimpulan

align-item dan align-self ialah dua atribut reka letak fleksibel yang sangat berguna apabila mengoptimumkan reka letak halaman web. Dengan menetapkan dua sifat ini dengan betul, kita boleh mengawal penjajaran menegak elemen pada halaman dengan mudah tanpa menulis kod CSS yang rumit, menjadikan reka letak halaman lebih fleksibel dan cantik.

Untuk meringkaskan, align-item mengawal penjajaran semua elemen kanak-kanak dalam bekas fleksibel, manakala align-self mengawal penjajaran setiap elemen kanak-kanak itu sendiri. Kesemuanya boleh membantu kami menggunakan reka letak fleksibel dengan lebih baik dan mencapai kesan halaman yang lebih baik. Di atas ialah kandungan tentang teknik pengoptimuman atribut susun atur fleksibel CSS saya harap ia akan membantu anda dalam pembangunan web.

Atas ialah kandungan terperinci Petua pengoptimuman sifat reka letak fleksibel CSS: align-item dan align-self. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!