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

Flex Direction

Flex

Flex Grow:

Flex Shrink: