flexbox
-
css flexible box layout: http://www.w3.org/tr/css3-flexbox/
css'in yillardir suregelen sikik problemlerini cozmek icin atilmis buyuk adim. artik butun yaygin browserlarin guncel surumlerinde calisir halde ve grid system, alignment gibi bir cok ozellikle geliyor. demolari: https://philipwalton.github.io/solved-by-flexbox/ -
(bkz: draft mraft akarim bununla)
flex-direction ve flex-wrap property'leri ile hungur hungur aglatan. gencligimiz heba olduydu bunlarin yoklugu yuzunden.
gelecek nesiller kiymetini bilsin :' ) -
web tasarımcıların sıklıkla kullandığı kutu pozisyonlama stillerini hazır halde bulunduran css layout sistemi. aralarında eşit boşluklar olsun, kutuların etraflarında eşit boşluklar olsun, boş kalan kısmı son kutu doldursun, container genişlerse bir kutu 1 birim büyürken diğeri 2 birim büyüsün gibi çeşitli düzenlemeler oldukça kolay yapılabiliyor. float kullanmaya gerek kalmadan satır veya sütun olarak yerleştirilebiliyor kutular. grid ile birlikte çok kısa sürede bir web sitesinin layoutunu oluşturmayı sağlar.
bootstrap ise bir css özelliği değil, içerisinde farklı işlevleri sağlayan classları bulunduran bir css dosyasıdır. kullanıma hazır olması için farklı flex işlevleri ile classlar oluşturulmuş, kullanıcıların html dosyasında kullanımına hazır hale getirilmiştir bootstrap'te. bunun yerine web tasarımcılar kendileri de css dosyalarında flex containerlar oluşturup kendi classlarını tanımlayabilirler. -
artık tüm projelerimde kullandığım nane. bu nedir nasıl çalışır diyenler şu oyun ile öğrenebilirler. bana çok yardımı dokundu.
-
-
flexbox bilginizi ve kullanma yeteneğinizi artıracak oyun, etkileşimli rehber ve kılavuzlara aşağıdaki bağlantılardan ulaşabilirsiniz
games to flexbox (flexbox oyunları)
https://flexboxfroggy.com/
http://www.flexboxdefense.com/
https://mastery.games/flexboxzombies/
https://codingfantasy.com/games/flexboxadventure
ınteractive guides to flexbox (etkileşimli flexbox kılavuzları)
https://haydogdu1990.github.io/…e-guide-to-flexbox/
https://www.joshwcomeau.com/…tive-guide-to-flexbox/
https://flexbox.help/
https://yoksel.github.io/flex-cheatsheet/
https://fjolt.com/article/a-guide-to-css-flexbox
https://dzone.com/…nteractive-guide-to-css-flex-box
guides to flexbox (flexbox kılavuzları)
https://css-tricks.com/…ets/css/a-guide-to-flexbox/
https://www.w3schools.com/…s3_flexbox_container.asp
https://www.w3schools.com/…s/css3_flexbox_items.asp
https://www.w3docs.com/…imate-guide-to-flexbox.html
https://developer.mozilla.org/…s/css_layout/flexbox
https://developer.mozilla.org/…_concepts_of_flexbox
https://www.freecodecamp.org/…exbox-complete-guide/
https://cssreference.io/flexbox/ -
-
css'i yeni öğreniyorum sayılır ve bu float-clear mevzusu çok mantıksız ve karmaşık gelmeye başlamıştı ta ki artık bu saçmalıklara gerek kalmayıp flexbox kullanıldığını öğrenmeme kadar.flexbox'ın ise herşeyini yarım saatte kavradım.
-
sensiz geçen yıllarımı yaşanmamış sayıyorum dediğimdir.
-
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.
ekşi sözlük kullanıcılarıyla mesajlaşmak ve yazdıkları entry'leri
takip etmek için giriş yapmalısın.
hesabın var mı? giriş yap