CSS align-content Kullanımı

CSS'de align-content, bir kutunun içerisindeki birden fazla satır arasındaki boşluğu denetler. Bu özellik, grid veya flex container olarak tanımlanmış kutular için kullanılır.

align-content özelliği, kutunun içerisindeki satırların yatay olarak nasıl dağıtılacağını belirler. Özellik değerleri aşağıda verilmiştir.

  • flex-start : Satırlar sola yaslar.
  • center : Satırlar ortalar.2
  • flex-end : Satırlar sağa yaslar.
  • space-between : Satırlar arasındaki boşluk eşit olacak şekilde dağıtılır.
  • space-around : Satırlar arasındaki boşluk iki tarafında eşit olacak şekilde dağıtılır.
  • stretch : Satırlar kutunun yüksekliğine göre uzatılır.

Aşağıda örnek bir kullanım verilmiştir..

.container {
    display: flex;
    align-content: center;
}

Bu kod, .container sınıfı içindeki kutuları ortaya hizalayacaktır.

Ayrıca, align-content ile align-items arasında bir fark vardır. align-items, kutunun içerisindeki elemanların yatay olarak nasıl dağıtılacağını belirlerken, align-content ise kutunun içerisindeki satırların yatay olarak nasıl dağıtılacağını belirler.



İlginizi Çekebilir

CSS grid-row-gap Kullanımı

CSS color-profile Kullanımı

CSS text-decoration-color Kullanımı

CSS list-style Kullanımı

CSS grid-column-gap Kullanımı