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

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

flex-* CSS özellikleri ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

59 views

flex-basis CSS özelliği, bir flex öğesinin ana eksen boyunca başlangıç boyutunu belirler. Bu boyut, öğenin içeriği veya başka özelliklerden bağımsız olarak, öğenin alması gereken varsayılan alanı tanımlar. Öğe daha sonra flex-grow ve flex-shrink özelliklerine göre esneyebilir. flex-basis için değer olarak auto, bir uzunluk (örn. px, %, em), veya content kullanılabilir. Bu, flex öğelerin nasıl dağıtılacağı ve yerleştirileceği üzerinde önemli bir etkiye sahiptir.

 

flex-grow CSS özelliği, bir flex öğesinin, flex konteyner içindeki mevcut boş alana göre ne kadar büyüyeceğini belirler. Bu özellik bir sayı alır ve bu sayı, öğenin büyüme faktörünü temsil eder. Eğer tüm öğelerin flex-grow değeri 0 ise, ekstra boşluk öğeler arasında paylaştırılmaz. Eğer bir veya daha fazla öğe pozitif bir flex-grow değerine sahipse, bu öğeler mevcut ekstra alanı kendi flex-grow değerlerine göre orantılı bir şekilde paylaşır.

 

flex-shrink CSS özelliği, bir flex öğesinin, flex konteyner içinde fazladan alan olmadığında ne kadar küçülebileceğini belirler. Bu özellik bir sayı alır ve bu sayı, öğenin küçülme faktörünü ifade eder. Bir öğenin flex-shrink değeri ne kadar yüksekse, fazla alanın olmadığı durumlarda o öğe diğerlerine göre daha fazla küçülür. Varsayılan değer 1'dir, bu da öğenin mevcut alana sığması için orantılı bir şekilde küçülebileceği anlamına gelir.

 

flex CSS özelliği, bir flex öğesi için flex-grow, flex-shrink ve flex-basis özelliklerini tek bir bildirimde birleştirir. Bu shorthand özellik, öğenin flex konteyner içinde nasıl büyüyeceğini, küçüleceğini ve başlangıç boyutunu tanımlar. Genel formatı flex: <flex-grow> <flex-shrink> <flex-basis>; şeklindedir. Örneğin, flex: 1 0 auto; bir flex öğesinin mevcut boşluktan esnek bir şekilde pay almasını sağlar, küçülmemesini belirtir ve başlangıç boyutunu öğenin içeriğine göre ayarlar. Bu özellik, esnek ve duyarlı web tasarımında sıkça kullanılır.

 

flex-direction CSS özelliği, bir flex konteyner içindeki öğelerin yerleşim yönünü belirler. Bu özellik, öğelerin yatay olarak mı yoksa dikey olarak mı dizileceğini kontrol eder. Dört değer alabilir: row (öğeler yatay olarak dizilir, varsayılan değer), row-reverse (öğeler yatay olarak ters sırada dizilir), column (öğeler dikey olarak dizilir), ve column-reverse (öğeler dikey olarak ters sırada dizilir). Bu ayar, öğelerin nasıl paketlendiğini ve dolayısıyla sayfa düzeninin genel akışını önemli ölçüde etkiler.

 

flex-wrap CSS özelliği, bir flex konteyner içindeki öğelerin tek bir satırda mı yoksa birden fazla satıra mı yayılacağını kontrol eder. Eğer öğeler konteynerin genişliğine sığmıyorsa, bu özellik öğelerin nasıl "wrap" edileceğini (yani alt satıra geçip geçmeyeceğini) belirler. Üç değer alabilir: nowrap (öğeler tek bir satırda dizilir, varsayılan değer), wrap (öğeler gerektiğinde yeni satıra geçer), ve wrap-reverse (öğeler gerektiğinde yeni satıra ters sırada geçer). Bu özellik, özellikle duyarlı tasarımlarda önemlidir, çünkü ekran boyutu değiştikçe öğelerin düzgün bir şekilde sığdırılmasını sağlar.

 

 

TailwindCSS:

Flex Basis

Class
Properties
basis-0 flex-basis: 0px;
basis-1 flex-basis: 0.25rem; /* 4px */
basis-2 flex-basis: 0.5rem; /* 8px */
basis-3 flex-basis: 0.75rem; /* 12px */
basis-4 flex-basis: 1rem; /* 16px */
basis-5 flex-basis: 1.25rem; /* 20px */
basis-6 flex-basis: 1.5rem; /* 24px */
basis-7 flex-basis: 1.75rem; /* 28px */

 

1.png

 

Flex Direction

Class
Properties
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;

 

1.png

1.png

 

 

Class
Properties
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;

 

1.png

 

Flex

Class
Properties
flex-1 flex: 1 1 0%;
flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;

 

1.png

 

1.png

1.png

1.png

 

Flex Grow:

Class
Properties
grow flex-grow: 1;
grow-0 flex-grow: 0;

 

1.png

 

 

Flex Shrink:

Class
Properties
shrink flex-shrink: 1;
shrink-0 flex-shrink: 0;

 

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