CSS Flexbox Kullanımı
Bu yazımda CSS Flex kullanımındaki “Container” ve “Item” kavramlarına odaklanarak, CSS Flexbox Property’lerindeki kafa karışıklıklarını gidermeye gayret edeceğim.
CSS Flexbox modülünden önce, inline veya block eleman yönetiminde yetersiz ve uğraştırıcı bir kullanım söz konusuyken, esnek ve duyarlı bir yapıya sahip olan flexbox’ın çıkışından sonra bu işlemler çok daha kolay uygulanabilir hale geldi.
“Flex Container” ve “Flex Item” Kavramlarının Farkına Varmak
CSS Flexbox Properties
Flexbox property’lerini birbirine karıştırmamanın en iyi yolu, iki farklı gruba ait olduklarının farkına varmaktır.
İlk Olarak Container Property’leri İnceleyelim
Toplam 6 adet Container Property bulunmaktadır.
Container Properties ( flex-direction )
Container Properties ( flex-wrap )
Container Properties ( flex-flow )
flex-flow sadece bir kısa yazım şekli olup flex-direction ve flex wrap değerlerinden oluşur.
Container Properties ( justify-content )
Container Properties ( align-items )
Container Properties ( align-content )
Şimdi Item Property’leri İnceleyelim
Toplam 6 adet Item Property bulunmaktadır.
Item Properties ( order )
Item Properties ( flex-grow )
Item Properties ( flex-shrink )
Item Properties ( flex-basis )
Item Properties ( flex )
flex sadece bir kısa yazım şekli olup, flex-grow, flex-shrink ve flex-basis değerlerinden oluşur.
Item Properties ( align-self )
