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 justify-content özelliği ve TailwindCSS Karşılığı


Doğuhan ELMA

46 views

CSS'de justify-content özelliği, Flexbox ve Grid konteynerlerinde öğelerin ana eksen (main axis) boyunca nasıl hizalanacağını belirler. Bu özellik, özellikle birden fazla öğenin yatay (satırlar için) veya dikey (sütunlar için) hizalanmasını kontrol etmek istediğinizde kullanılır.

Flexbox ve Grid'de justify-content özelliğinin kullanımı, içerdiği öğeler arasındaki boşluğu ve bu öğelerin konteyner içindeki konumunu ayarlamak için idealdir. Bu özellik aşağıdaki değerleri alabilir:

flex-start: Öğeler, konteynerin başlangıç kenarına hizalanır. Bu, yatay düzende soldan sağa, dikey düzende üstten alta doğru bir hizalanmadır.

flex-end: Öğeler, konteynerin bitiş kenarına hizalanır. Yatay düzende sağdan sola, dikey düzende alttan üste doğru bir hizalanma sağlar.

center: Öğeler, konteynerin ortasında hizalanır.

space-between: Öğeler, konteyner boyunca eşit aralıklarla dağıtılır, ilk öğe başlangıç kenarında ve son öğe bitiş kenarında yer alır.

space-around: Her öğenin etrafında eşit boşluk bırakılarak dağıtılır, ancak öğelerin kenarlarındaki boşluklar iç kısımlarındaki boşlukların yarısı kadardır.

space-evenly: Öğeler, başlangıç, bitiş ve öğeler arası boşluklar eşit olacak şekilde konteyner boyunca dağıtılır.

Flexbox için örnek kullanım:

.container {
  display: flex;
  justify-content: center; /* Öğeleri konteynerin ortasında hizalar */
}

Grid için örnek kullanım:

.container {
  display: grid;
  justify-content: space-between; /* Grid öğelerini konteyner boyunca eşit aralıklarla dağıtır */
}

justify-content özelliği, web sayfalarında düzenli ve görsel açıdan çekici tasarımlar oluşturmak için oldukça yararlıdır. Flexbox ve Grid'in esnekliği sayesinde, farklı ekran boyutları ve cihazlar için uyumlu, duyarlı tasarımlar yapmak daha kolay hale gelir.

 

TailwindCSS:

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

 

1.png

image.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...