CSS'de align-content özelliği, Flexbox veya Grid konteynerindeki çapraz eksen boyunca (yani, ana eksene dik olan eksen) öğelerin nasıl hizalandığını kontrol eder. Bu özellik, çok satırlı esnek veya grid konteynerlerde özellikle önemlidir ve yalnızca konteynerde birden fazla eksen hattı (satır veya sütun) olduğunda etkilidir. align-content, öğeler arasındaki boşluk dağılımını ve çapraz eksendeki toplu hizalamayı yönetir.

align-content için kullanılabilir değerler şunlardır:

stretch (varsayılan): Konteyner öğeleri, mevcut alanı dolduracak şekilde çapraz eksende genişletilir. Bu, tüm öğelerin konteynerin tam yüksekliğini veya genişliğini kaplaması anlamına gelir.

flex-start: Öğeler çapraz eksenin başlangıç noktasına doğru hizalanır. Bu, öğelerin üst veya sol kenara sıkıştırıldığı anlamına gelir (çapraz eksenin yönüne bağlı olarak).

flex-end: Öğeler, çapraz eksenin bitiş noktasına doğru hizalanır. Bu, öğelerin alt veya sağ kenara sıkıştırıldığı anlamına gelir.

center: Öğeler çapraz eksenin ortasına hizalanır.

space-between: Öğeler arasında eşit boşluk bırakılarak, ilk öğe çapraz eksenin başında ve son öğe çapraz eksenin sonunda olacak şekilde dağıtılır.

space-around: Öğeler arasında eşit boşluk bırakılır; ancak, her öğenin çapraz eksendeki başlangıç ve bitiş noktalarında yarım boşluk bulunur.

space-evenly: Öğeler, hem aralarında hem de konteynerin kenarları ile aralarında eşit boşluk olacak şekilde dağıtılır.

Örnek kullanımı:

.container {
  display: flex; /* veya grid */
  flex-wrap: wrap; /* Çok satırlı bir esnek konteyner oluşturmak için */
  align-content: space-between; /* Öğeler arasında ve konteynerin çapraz ekseninde eşit boşluk bırakır */
}

Bu özellik, genellikle web sayfalarındaki layoutların düzenlenmesinde kullanılır, özellikle değişken içerik miktarlarına sahip alanlarda veya responsif tasarımlarda öğelerin düzgün bir şekilde hizalanmasını sağlamak için önemlidir.

TailwindCSS: