Penjajaran Flex-Start vs. Baseline: Bilakah Anda Harus Menggunakan Yang Mana?

Baseline vs Flex-Start Alignment

Dalam susun atur fleksibel, flex-start menjajarkan item pada permulaan paksi silang, manakala garis dasar menjajarkannya di sepanjang garis dasar kandungan mereka.

Garis asas Penjajaran

Seperti namanya, penjajaran garis dasar menambat garis dasar item fleksibel, garis tempat kebanyakan aksara duduk. Item dengan jarak maksimum antara garis dasar dan tepi mula silang akan sama rata dengan tepi itu.

Perbezaan Visual

Apabila saiz fon item fleksibel adalah seragam atau kandungannya adalah sama, flex-start dan baseline mungkin kelihatan boleh ditukar ganti. Walau bagaimanapun, perbezaan muncul apabila saiz item berbeza-beza.

Menentukan Garis Dasar

Item paling tinggi berturut-turut menentukan garis dasar untuk penjajaran garis dasar.

Contoh

Pertimbangkan kod berikut coretan:

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

Item dengan saiz fon terbesar, "B," akan menentukan garis dasar untuk baris. Item lain akan dijajarkan di sepanjang garis dasar "B", seperti yang digambarkan dalam imej di bawah.

[Imej item fleksibel dijajarkan pada ketinggian yang berbeza-beza menggunakan penjajaran garis dasar]

Nota Penting

Kata kunci garis dasar tidak disokong oleh semua penyemak imbas. Untuk keserasian merentas penyemak imbas, pertimbangkan untuk menggunakan align-item: flex-start bersama-sama dengan sifat penjajaran menegak CSS3.

Atas ialah kandungan terperinci Penjajaran Flex-Start vs. Baseline: Bilakah Anda Harus Menggunakan Yang Mana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!