Penjajaran Flexbox: Apakah Perbezaan Antara `flex-start` dan `baseline`?

Flex-Start vs. Baseline Alignment dalam Flexbox

Apabila bekerja dengan sifat align-self CSS Flexbox, fahami perbezaan antara flex-start dan garis dasar adalah penting. Walaupun pada mulanya mereka mungkin kelihatan menghasilkan hasil yang sama, mereka mempamerkan gelagat yang berbeza dalam senario tertentu.

Penjajaran Mula-Flex

menjajarkan item flex-start pada permulaan. tepi paksi silang bekas fleksibel. Ini biasanya bahagian atas untuk orientasi mendatar dan kiri untuk orientasi menegak.

Penjajaran Garis Dasar

garis dasar menjajarkan item flex sepanjang garis dasar kandungannya. Garis pangkal ialah garis halimunan di mana kebanyakan huruf diletakkan dan di bawahnya yang diturunkan.

Perbezaan

Dalam kes di mana saiz fon dan kandungan item fleksibel adalah konsisten, flex-start dan baseline akan menghasilkan keputusan yang serupa. Walau bagaimanapun, apabila faktor ini berbeza-beza, penjajaran garis dasar menjadi lebih jelas.

Apabila menggunakan penjajaran garis dasar, item paling tinggi dalam baris menentukan kedudukan garis dasar. Item fleksibel dijajarkan supaya garis dasarnya dijajarkan, dengan item paling jauh dari tepi jidar permulaannya diletakkan rata dengan tepi itu.

Contoh

Pertimbangkan kod berikut :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

Dengan kod ini, item flex dijajarkan menggunakan garis dasarnya. Output berikut dijana:

<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <div class="flex-item">D</div>
  <div class="flex-item">E</div>
</div>

Perhatikan bahawa walaupun kandungan item flex berbeza dari segi saiz, semuanya dijajarkan di sepanjang garis dasar.

Atas ialah kandungan terperinci Penjajaran Flexbox: Apakah Perbezaan Antara `flex-start` dan `baseline`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!