Rumah >hujung hadapan web >tutorial css >Penjajaran Flex-Start vs. Baseline: Bilakah Anda Harus Menggunakan Yang Mana?

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

Barbara Streisand
Barbara Streisandasal
2024-12-22 05:39:12847semak imbas

Flex-Start vs. Baseline Alignment: When Should You Use Which?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn