Flexbox: Apakah Perbezaan Antara `align-item` dan `align-content`?

Flexbox: Memahami Perbezaan Antara align-content dan align-item

Apabila ia berkaitan dengan susun atur flexbox, align-item dan align- sifat kandungan mempunyai tujuan yang berbeza dalam menjajarkan kandungan dalam flex bekas.

selaras-item

selaras-item menjajarkan elemen di sepanjang paksi silang bekas fleksibel. Paksi silang ini berserenjang dengan arah paksi utama, yang ditentukan oleh sifat arah lentur. Secara lalai, flex-direction: row, jadi paksi utama adalah mendatar dan paksi silang adalah menegak.

align-item boleh mempunyai pelbagai nilai untuk menjajarkan elemen secara menegak: mula, tamat, tengah, regangan dan garis dasar.

menjajarkan-kandungan

Sebaliknya, menjajarkan-kandungan menjajarkan garisan elemen dalam bekas flex berbilang baris. Apabila terdapat hanya satu baris elemen, align-content tidak mempunyai kesan. Sifat ini mula dimainkan apabila berbilang garisan terbentuk disebabkan oleh lebar bekas yang terhad.

kandungan sejajar juga mengambil pelbagai nilai:

• mula-lentur: Garisan elemen dijajar ke atas daripada ruang yang mengandunginya
• flex-end: Garisan elemen diselaraskan ke bahagian bawah kandungannya ruang
• pusat: Garisan unsur menjajar secara menegak di tengah ruang yang mengandunginya
• ruang-antara: Garisan unsur teragih sama rata di sepanjang paksi menegak dengan jurang antaranya
• ruang sekeliling: Garisan unsur teragih sama rata sepanjang paksi menegak dengan celah sebelum dan selepas mereka

Contoh

Pertimbangkan kod berikut:

.container {
  display: flex;
  flex-direction: row;
}

.item {
  align-items: center;
  align-content: space-around;
}

Dalam contoh ini, align-item: tengah menjajarkan elemen anak menegak di tengah-tengah ruang yang mengandungi mereka, iaitu item. align-content: ruang-sekitar menjajarkan garisan elemen secara menegak, dengan jurang antara dan selepasnya. Hasilnya ialah barisan elemen berpusat menegak dengan jurang antara setiap baris.

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