flexbox

• bu gün bile hala tam olarak desteklenmemektedir. tahmin edin bakalım hangi tarayıcılarda? tabii ki internet explorer denen gubidik taracıyıda. edge'de sıkıntı yok ama windows 10'a sahip değilseniz başka tarayıcı kullanmanız gerekir.
  
  bir örnek verelim.
  normal tarayıcılar flex: 1; kısaltmasını :
  
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  
  olarak algılarken, internet explorer 11
  
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  
  internet explorer 10
  
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  
  olarak algılar. internet explorer 9 ve aşağısını saymıyorum, onlar hiç desteklemez. ayrıca bu gerizekalı internet explorer, bir elemanın flexbox başlangıç (initial) değerini de farklı algılar. üstelik ie10'da faklı ie11'de farklı. bari biriniz düzgün olaydı dersiniz, o da yok.
  
  ayrıca eski android versiyonlarındaki ön tanımlı gelen tarayıcı da desteklemez.
  
  bu kadar gecikmiş olmasının bir sebebi de isimlendirme ve kurallarının belirlenmesinde yaşanan sıkıntılardır.
  
  şimdi display: flex; olarak yazılan kodu önceleri display:box; olarak yazmak gerekiyordu. ayrıca her tarayıcının kendine has bir önek (prefix) yazmak gerekiyordu. bu durum eski tarayıcılar için hala gerekli.
  
  bu sıkıntılardan dolayı modern css frameworklar (bootstrap, vb) bile flex olayına girmeye korkuyorlar. bootstrap 4. versiyonunda bile (daha alfa) tam geçmeye korkuyor gibi. nerden biliyorsun derseniz flex için ayrı, eski clear'lı float'lı için ayrı veriyon sunacak herhalde. github'daki repositorisinden anladığım kadarıyla yazıyorum.
  
  zurb foundation 6. versiyon ile çoktan geçti. google, material design ile geçti. flex ile yazılmış bir çok framework var. fakat onlar da bootstrap kadar yaygın olamadıkları için çok etkili olamıyorlar.
  
  eğer css ve responsive design ile ilgiliyseniz en kısa zamanda flex layout öğrenmeye başlayın.
  bu bir yatırım tavsiyesidir.