Flexbox `align-item`: `flex-start` lwn. `baseline` – Bilakah Saya Perlu Menggunakan Yang Mana?

Memahami Perbezaan Antara flex-start dan baseline

Apabila memanfaatkan sifat flex -align, pembezaan antara flex-start dan baseline mungkin tidak segera kelihatan. Ini kerana, dalam banyak situasi yang melibatkan saiz fon yang konsisten atau kandungan yang setara, kedua-dua nilai kelihatan menghasilkan penjajaran yang sama. Walau bagaimanapun, terdapat perbezaan penting yang menjadi jelas apabila berurusan dengan saiz kandungan yang berbeza-beza.

Penjajaran mula lentur

Nilai mula lentur menjajarkan item lentur di tepi permulaan paksi silang dalam bekas lentur. Penjajaran ini biasanya menjajarkan tepi kiri item lentur dalam reka letak mendatar dan tepi atas dalam reka letak menegak.

Penjajaran garis dasar

Sebaliknya, nilai garis dasar menjajarkan item fleksibel mengikut garis dasar kandungannya. Garis dasar merujuk kepada baris di mana kebanyakan huruf dan aksara terletak, dengan turunan memanjang di bawahnya. Item fleksibel diletakkan supaya garis pangkalnya sejajar, dengan item yang memaparkan jarak terbesar antara garis dasar dan tepi jidar mula silang diletakkan rata dengan tepi mula silang.

Perbezaan dalam Aplikasi

Pilihan antara penjajaran flex-start dan baseline bergantung pada kesan yang dimaksudkan. Flex-start sesuai apabila menjajarkan elemen dengan saiz yang konsisten. Sebaliknya, penjajaran garis dasar amat berguna apabila mengendalikan elemen dengan saiz fon yang berbeza-beza, kerana ia memastikan garis dasar adalah sama merentas semua item.

Contoh Demonstrasi

Pertimbangkan coretan kod berikut :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 300px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {
  font-size: 2em;
}
.item2 {
  font-size: 7em;
}
.item3 {
  font-size: 0.5em;
}
.item4 {
  font-size: 3em;
}
.item5 {
  font-size: 10em;
}

Dengan penjajaran garis dasar digunakan, item flex dijajarkan di sepanjang masing-masing garis dasar. Perhatikan bagaimana penjajaran dipengaruhi oleh item tertinggi (item 5), mengikut spesifikasi. Garis putus-putus mewakili garis dasar merentas item fleksibel.

Atas ialah kandungan terperinci Flexbox `align-item`: `flex-start` lwn. `baseline` – Bilakah Saya Perlu Menggunakan Yang Mana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!