Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de align-content özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

51 views

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:

Class
Properties
content-normal align-content: normal;
content-center align-content: center;
content-start align-content: flex-start;
content-end align-content: flex-end;
content-between align-content: space-between;
content-around align-content: space-around;
content-evenly align-content: space-evenly;
content-baseline align-content: baseline;
content-stretch align-content: stretch;

 

1.png

1.png

1.png

1.png

1.png

1.png

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...