Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler.
Flexbox Sunumu - powered by Latex Tak Misafir: tak34722
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Berat Emre Nebio˘ glu
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Github: https://github.com/spinningcat G¨orsel C ¸ alı¸smalar: https://spinningcat.github.io/Visuality/ Blog: https://spinningcat.github.io/blog/
Ba¸slamadan ¨ once bilmeniz gerekenler.
Linkedin: www.linkedin.com/in/berat-emre-nebio˘glu-08a58113
Ba¸slamadan ¨ once bilmeniz gerekenler.
Mail: beratn@gmail.com
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz?
JSFiddle tercihim ama listede bir c¸ok c¸evrimi¸ci editoru listeledim. Se¸cim size ait. jsfiddle - jsfiddle.net
C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
codepen - codepen.io plunkr - https://plnkr.co/ jsbin - https://jsbin.com/?html,output
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Her zaman aklımızın bir kenarında olsun. Kullanaca˘ gınız css ¨ ozelli˘ ginin browser deste˘gini mutlaka kontrol edin. https://caniuse.com/#comparison
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Her zaman aklımızın bir kenarında olsun. Kullanaca˘ gınız css ¨ ozelli˘ ginin browser deste˘gini mutlaka kontrol edin. https://caniuse.com/#comparison Css dosyanızı her hangibir hata olması durumuna kar¸sın kontrol ediniz. http://csslint.net/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Her zaman aklımızın bir kenarında olsun. Kullanaca˘ gınız css ¨ ozelli˘ ginin browser deste˘gini mutlaka kontrol edin. https://caniuse.com/#comparison Css dosyanızı her hangibir hata olması durumuna kar¸sın kontrol ediniz. http://csslint.net/ Sonra ki a¸samada css dosyanızı onaylama s¨ urecine sokun. https://jigsaw.w3.org/css-validator/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Her zaman aklımızın bir kenarında olsun. Kullanaca˘ gınız css ¨ ozelli˘ ginin browser deste˘gini mutlaka kontrol edin. https://caniuse.com/#comparison Css dosyanızı her hangibir hata olması durumuna kar¸sın kontrol ediniz. http://csslint.net/
Ba¸slamadan ¨ once bilmeniz gerekenler.
Sonra ki a¸samada css dosyanızı onaylama s¨ urecine sokun. https://jigsaw.w3.org/css-validator/
Ba¸slamadan ¨ once bilmeniz gerekenler.
Flexbox geni¸s bir destek a˘ gına sahiptir. Fakat eski browserlar i flexbox deste˘ gi yoktur. Autoprefixer diye bir yardımcı ara¸c burada imdadımıza yeti¸sir. Bununla ilgili ufak bir kod g¨ osterimi olacaktır.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://developer.mozilla.org/enUS/docs/Learn/CSS/CSS layout/Flexbox https:hashweb.org https:csstricks.comsnippetscssaguidetoflexbox https:youtu.beG7EIAgfkhmg http:www.flexboxpatterns.comhome https:csstricks.comdesigningaproduct-pagelayoutwithflexbox
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox de˘gi¸sik ya da bilinmeyen ¨ ol¸cu ¨leri olan elemanların, sayfanın ¨ol¸cu ¨s¨ une g¨ ore pozisyonlarını ve ¨ ol¸cu ¨lerini tekrar ayarlar. A¸sa˘gıdaki ¨orneklerde bunu daha g¨ uzel bir ¸sekilde g¨ormeniz m¨ umk¨ un olacak. https://jsfiddle.net/hellyeah/255ryrst/8/embedded/ - C ¸ ok basit bir layout. S¸imdi yapaca˘ gımız browser’ı k¨ u¸cu ¨lt¨ up, b¨ uy¨ ulterek nesnelerin nasıl otomatik olarak, uygun yerlere yerle¸stirildi˘ gini g¨ osterce˘ gim.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox de˘gi¸sik ya da bilinmeyen ¨ ol¸cu ¨leri olan elemanların, sayfanın ¨ol¸cu ¨s¨ une g¨ ore pozisyonlarını ve ¨ ol¸cu ¨lerini tekrar ayarlar. A¸sa˘gıdaki ¨orneklerde bunu daha g¨ uzel bir ¸sekilde g¨ormeniz m¨ umk¨ un olacak. https://jsfiddle.net/hellyeah/255ryrst/8/embedded/ - C ¸ ok basit bir layout. S¸imdi yapaca˘ gımız browser’ı k¨ u¸cu ¨lt¨ up, b¨ uy¨ ulterek nesnelerin nasıl otomatik olarak, uygun yerlere yerle¸stirildi˘ gini g¨ osterce˘ gim. Ayrıca chrome’a girerek developer tools’undan biraz bahsedece˘ gim.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox de˘gi¸sik ya da bilinmeyen ¨ ol¸cu ¨leri olan elemanların, sayfanın ¨ol¸cu ¨s¨ une g¨ ore pozisyonlarını ve ¨ ol¸cu ¨lerini tekrar ayarlar. A¸sa˘gıdaki ¨orneklerde bunu daha g¨ uzel bir ¸sekilde g¨ormeniz m¨ umk¨ un olacak. https://jsfiddle.net/hellyeah/255ryrst/8/embedded/ - C ¸ ok basit bir layout. S¸imdi yapaca˘ gımız browser’ı k¨ u¸cu ¨lt¨ up, b¨ uy¨ ulterek nesnelerin nasıl otomatik olarak, uygun yerlere yerle¸stirildi˘ gini g¨ osterce˘ gim. Ayrıca chrome’a girerek developer tools’undan biraz bahsedece˘ gim. Buna ek olarak chrome’ın developer tools’unda, mobil se¸cimler yapabilmenizi sa˘ glayan bir b¨ ol¨ um var.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox de˘gi¸sik ya da bilinmeyen ¨ ol¸cu ¨leri olan elemanların, sayfanın ¨ol¸cu ¨s¨ une g¨ ore pozisyonlarını ve ¨ ol¸cu ¨lerini tekrar ayarlar. A¸sa˘gıdaki ¨orneklerde bunu daha g¨ uzel bir ¸sekilde g¨ormeniz m¨ umk¨ un olacak. https://jsfiddle.net/hellyeah/255ryrst/8/embedded/ - C ¸ ok basit bir layout. S¸imdi yapaca˘ gımız browser’ı k¨ u¸cu ¨lt¨ up, b¨ uy¨ ulterek nesnelerin nasıl otomatik olarak, uygun yerlere yerle¸stirildi˘ gini g¨ osterce˘ gim. Ayrıca chrome’a girerek developer tools’undan biraz bahsedece˘ gim. Buna ek olarak chrome’ın developer tools’unda, mobil se¸cimler yapabilmenizi sa˘ glayan bir b¨ ol¨ um var. Flexbox’un size nasıl bir g¨ or¨ unt¨ u sa˘ gladı˘gını Nexus5g ve iphone6 plus ile g¨ osterece˘ gim.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Developer tools’da ¨ onceden tanımlanmı¸s bir c¸ok mobil cihaz mevcut.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz?
Developer tools’da ¨ onceden tanımlanmı¸s bir c¸ok mobil cihaz mevcut.
C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Ama unutmamak gerekir ki, bu g¨ or¨ unt¨ uler yakla¸sık tahminler olabilir. C ¸u ¨nk¨ u i¸sletim sisteminin i¸cinde de˘giliz.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
1
Bir ¸cok browser tarafından deste˘ ge sahiptir. ie9, ie10 gibi browserlarda maalesef destek yoktur ama bu i¸sin genede bir ¸c¨oz¨ um¨ u vardır. Bu ¸c¨ oz¨ um autoprefixer. Autoprefixer o an kullandı˘ gın browser i¸cin gerekli olan kelimeleri ekler. Hemen bir ¨ orne˘ gine bakalım.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu
1
Bir ¸cok browser tarafından deste˘ ge sahiptir. ie9, ie10 gibi browserlarda maalesef destek yoktur ama bu i¸sin genede bir ¸c¨oz¨ um¨ u vardır. Bu ¸c¨ oz¨ um autoprefixer. Autoprefixer o an kullandı˘ gın browser i¸cin gerekli olan kelimeleri ekler. Hemen bir ¨ orne˘ gine bakalım.
2
https:autoprefixer.github.io
˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu
1
Bir ¸cok browser tarafından deste˘ ge sahiptir. ie9, ie10 gibi browserlarda maalesef destek yoktur ama bu i¸sin genede bir ¸c¨oz¨ um¨ u vardır. Bu ¸c¨ oz¨ um autoprefixer. Autoprefixer o an kullandı˘ gın browser i¸cin gerekli olan kelimeleri ekler. Hemen bir ¨ orne˘ gine bakalım.
2
https:autoprefixer.github.io
3
Birazdan payla¸saca˘ gım ¨ ornekteki gibi bir hesaplamadan kurtulmak isteyebiliriz. A¸cık¸cası flexbox bu hesaplamayı sizin yerinize yaparak nesneleri yerle¸stiriyor. Bu konuda size 2 tane ¨ ornek g¨ ostermek istiyorum.
˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
1
https://jsfiddle.net/hellyeah/Lv6me6s4/21/embedded/result/ - Pencerenin boyutu her de˘ gi¸sti˘ ginde bu hesaplamalar tekrar yapılır. Flexbox ger¸cekten bizleri b¨ uy¨ uk bir u˘gra¸stan kurtarmı¸stır bu konuda.
Flexbox Sunumu powered by Latex
1
https://jsfiddle.net/hellyeah/Lv6me6s4/21/embedded/result/ - Pencerenin boyutu her de˘ gi¸sti˘ ginde bu hesaplamalar tekrar yapılır. Flexbox ger¸cekten bizleri b¨ uy¨ uk bir u˘gra¸stan kurtarmı¸stır bu konuda.
Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
2
https://jsfiddle.net/hellyeah/6dbyL6ut/1/embedded/result - Bir web sayfasında her ¸sey kutu modellemesi ¸seklindedir. width’i, height’i, margin’i, padding’i vardır. Bu ¨ornekte i¸c i¸ce ge¸cmi¸s ve pozisyonları ve boyutları hesaplanmı¸s bir kutu modeli g¨ or¨ uyorsunuz. Tamam buraya kadar her ¸sey g¨ uzel ama kar¸sınızda karma¸sık layout lar ¸cıktı˘gı zaman, flexbox size baya yardımcı olacaktır.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://jsfiddle.net/FreeClimb/9z1y5n4m/embedded/ ¨ Ornek u ¨zerinden inceleyelim. K¨ u¸cu ¨k ¸capta media query lerin kullanıldı˘ gıda m¨ umk¨ und¨ ur.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://jsfiddle.net/FreeClimb/9z1y5n4m/embedded/ ¨ Ornek u ¨zerinden inceleyelim. K¨ u¸cu ¨k ¸capta media query lerin kullanıldı˘ gıda m¨ umk¨ und¨ ur. https://spinningcat.github.io/Visuality/ - Daha b¨ uy¨ uk ¸caplı bir ¨orne˘ gi inceleyelim.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://jsfiddle.net/FreeClimb/9z1y5n4m/embedded/ ¨ Ornek u ¨zerinden inceleyelim. K¨ u¸cu ¨k ¸capta media query lerin kullanıldı˘ gıda m¨ umk¨ und¨ ur. https://spinningcat.github.io/Visuality/ - Daha b¨ uy¨ uk ¸caplı bir ¨orne˘ gi inceleyelim. Bu noktada bootstrap mı yoksa flexbox’umu tercih edersinin sorusu ”duruma ba˘ glı” olarak cevaplanabilir. C ¸u ¨nk¨ u bootstrap koca bir framework ve bir s¨ ur¨ u ¸seyin aynı anda y¨ uklenmesi anlamına geliyor. Bu ¨ornekte ise i¸simizi bir ka¸c media query ile halledebiliyoruz. Yani flexbox hem sayfanın komponent kısmında, hem de grid b¨olgesinde belli ¸cu ¨zmler sunabiliyor. Fukol-grid gibi.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://jsfiddle.net/FreeClimb/9z1y5n4m/embedded/ ¨ Ornek u ¨zerinden inceleyelim. K¨ u¸cu ¨k ¸capta media query lerin kullanıldı˘ gıda m¨ umk¨ und¨ ur. https://spinningcat.github.io/Visuality/ - Daha b¨ uy¨ uk ¸caplı bir ¨orne˘ gi inceleyelim. Bu noktada bootstrap mı yoksa flexbox’umu tercih edersinin sorusu ”duruma ba˘ glı” olarak cevaplanabilir. C ¸u ¨nk¨ u bootstrap koca bir framework ve bir s¨ ur¨ u ¸seyin aynı anda y¨ uklenmesi anlamına geliyor. Bu ¨ornekte ise i¸simizi bir ka¸c media query ile halledebiliyoruz. Yani flexbox hem sayfanın komponent kısmında, hem de grid b¨olgesinde belli ¸cu ¨zmler sunabiliyor. Fukol-grid gibi. https://github.com/Heydon/fukol-grids
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://jsfiddle.net/FreeClimb/9z1y5n4m/embedded/ ¨ Ornek u ¨zerinden inceleyelim. K¨ u¸cu ¨k ¸capta media query lerin kullanıldı˘ gıda m¨ umk¨ und¨ ur. https://spinningcat.github.io/Visuality/ - Daha b¨ uy¨ uk ¸caplı bir ¨orne˘ gi inceleyelim. Bu noktada bootstrap mı yoksa flexbox’umu tercih edersinin sorusu ”duruma ba˘ glı” olarak cevaplanabilir. C ¸u ¨nk¨ u bootstrap koca bir framework ve bir s¨ ur¨ u ¸seyin aynı anda y¨ uklenmesi anlamına geliyor. Bu ¨ornekte ise i¸simizi bir ka¸c media query ile halledebiliyoruz. Yani flexbox hem sayfanın komponent kısmında, hem de grid b¨olgesinde belli ¸cu ¨zmler sunabiliyor. Fukol-grid gibi. https://github.com/Heydon/fukol-grids https://codepen.io/heydon/pen/dpzwVd
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim
https://facebook.github.io/yoga/
Ne Kullanıcaz?
https://github.com/facebook/yoga
C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
https://facebook.github.io/yoga/docs/getting-started/ ˙Incelemek isterseniz. Sayfa layout unu server-side dilleriyle olu¸sturabilirsiniz. ss
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
˙Ilk ¨once display:flex in tam olarak ne yaptı˘gını inceleyece˘ giz.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
˙Ilk ¨once display:flex in tam olarak ne yaptı˘gını inceleyece˘ giz. https://jsfiddle.net/vu1kz9af/16/ - display:flex’i display:block gibi d¨ u¸su ¨nmek m¨ umk¨ un aslında, css kurallarında item’ın width ini belirtmedi˘gim i¸cin, i¸cindeki metnin sı˘ gaca˘ gı kadar b¨ uy¨ u olmu¸s. Peki ya i¸cteki kutuların size’ını belirtirsem ne olacak? Bir bakalım.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
˙Ilk ¨once display:flex in tam olarak ne yaptı˘gını inceleyece˘ giz. https://jsfiddle.net/vu1kz9af/16/ - display:flex’i display:block gibi d¨ u¸su ¨nmek m¨ umk¨ un aslında, css kurallarında item’ın width ini belirtmedi˘gim i¸cin, i¸cindeki metnin sı˘ gaca˘ gı kadar b¨ uy¨ u olmu¸s. Peki ya i¸cteki kutuların size’ını belirtirsem ne olacak? Bir bakalım. https://jsfiddle.net/vu1kz9af/17/ - Dı¸sarıdaki flex container’inin b¨ uy¨ ul¨ u˘ gu ¨ne g¨ ore cisimleri b¨ uy¨ utt¨ u aslında. Verdi˘giniz de˘ ger dı¸s kısımdaki flex container’ının boyutunu a¸sarsa, dı¸s container’ın boyutunu almayacak ¸sekilde elemanların b¨ uy¨ ume durumlarını ayarlar.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
˙Ilk ¨once display:flex in tam olarak ne yaptı˘gını inceleyece˘ giz. https://jsfiddle.net/vu1kz9af/16/ - display:flex’i display:block gibi d¨ u¸su ¨nmek m¨ umk¨ un aslında, css kurallarında item’ın width ini belirtmedi˘gim i¸cin, i¸cindeki metnin sı˘ gaca˘ gı kadar b¨ uy¨ u olmu¸s. Peki ya i¸cteki kutuların size’ını belirtirsem ne olacak? Bir bakalım. https://jsfiddle.net/vu1kz9af/17/ - Dı¸sarıdaki flex container’inin b¨ uy¨ ul¨ u˘ gu ¨ne g¨ ore cisimleri b¨ uy¨ utt¨ u aslında. Verdi˘giniz de˘ ger dı¸s kısımdaki flex container’ının boyutunu a¸sarsa, dı¸s container’ın boyutunu almayacak ¸sekilde elemanların b¨ uy¨ ume durumlarını ayarlar. flex-direction 4 tane parametre almaktadır. A¸sa˘gıdaki ¨ornekte parametreleri inceleyip, ne oldu˘gunu anlamanızı bekliyorum. Dikkat ederseniz item ların hepsi bir kalıp olarak hareket edecektir.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
˙Ilk ¨once display:flex in tam olarak ne yaptı˘gını inceleyece˘ giz. https://jsfiddle.net/vu1kz9af/16/ - display:flex’i display:block gibi d¨ u¸su ¨nmek m¨ umk¨ un aslında, css kurallarında item’ın width ini belirtmedi˘gim i¸cin, i¸cindeki metnin sı˘ gaca˘ gı kadar b¨ uy¨ u olmu¸s. Peki ya i¸cteki kutuların size’ını belirtirsem ne olacak? Bir bakalım. https://jsfiddle.net/vu1kz9af/17/ - Dı¸sarıdaki flex container’inin b¨ uy¨ ul¨ u˘ gu ¨ne g¨ ore cisimleri b¨ uy¨ utt¨ u aslında. Verdi˘giniz de˘ ger dı¸s kısımdaki flex container’ının boyutunu a¸sarsa, dı¸s container’ın boyutunu almayacak ¸sekilde elemanların b¨ uy¨ ume durumlarını ayarlar. flex-direction 4 tane parametre almaktadır. A¸sa˘gıdaki ¨ornekte parametreleri inceleyip, ne oldu˘gunu anlamanızı bekliyorum. Dikkat ederseniz item ların hepsi bir kalıp olarak hareket edecektir.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flex-wrap varsayılanı nowraptır. Bunu wrap yaptı˘gın zaman flex container inin i¸cindeki nesneleri, dı¸s container’in sahip oldu˘ gu alana e¸sit olarak da˘gıtır. Bunu g¨ormeniz i¸cin iki farklı width de˘ geriyle ¨ornek yaptım.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flex-wrap varsayılanı nowraptır. Bunu wrap yaptı˘gın zaman flex container inin i¸cindeki nesneleri, dı¸s container’in sahip oldu˘ gu alana e¸sit olarak da˘gıtır. Bunu g¨ormeniz i¸cin iki farklı width de˘ geriyle ¨ornek yaptım. width:300 - https://jsfiddle.net/vu1kz9af/19/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flex-wrap varsayılanı nowraptır. Bunu wrap yaptı˘gın zaman flex container inin i¸cindeki nesneleri, dı¸s container’in sahip oldu˘ gu alana e¸sit olarak da˘gıtır. Bunu g¨ormeniz i¸cin iki farklı width de˘ geriyle ¨ornek yaptım. width:300 - https://jsfiddle.net/vu1kz9af/19/ width: 600 - https://jsfiddle.net/hellyeah/fq6hf3f6/15/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flex-wrap varsayılanı nowraptır. Bunu wrap yaptı˘gın zaman flex container inin i¸cindeki nesneleri, dı¸s container’in sahip oldu˘ gu alana e¸sit olarak da˘gıtır. Bunu g¨ormeniz i¸cin iki farklı width de˘ geriyle ¨ornek yaptım. width:300 - https://jsfiddle.net/vu1kz9af/19/ width: 600 - https://jsfiddle.net/hellyeah/fq6hf3f6/15/ nowrap: https://jsfiddle.net/fq6hf3f6/21/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flex-wrap varsayılanı nowraptır. Bunu wrap yaptı˘gın zaman flex container inin i¸cindeki nesneleri, dı¸s container’in sahip oldu˘ gu alana e¸sit olarak da˘gıtır. Bunu g¨ormeniz i¸cin iki farklı width de˘ geriyle ¨ornek yaptım. width:300 - https://jsfiddle.net/vu1kz9af/19/ width: 600 - https://jsfiddle.net/hellyeah/fq6hf3f6/15/ nowrap: https://jsfiddle.net/fq6hf3f6/21/ nowrap de˘ geri verildi˘ gi zaman nesneye tanımlanmı¸s width ve height in pek dikkate alınmadı˘ gını, oysa ki wrap yapıldı˘gında o de˘ gerlerin dikkate alındı˘ gı ve bununla birlikte elemanlar arası bo¸sluklarında g¨ ozetildi˘ gini g¨or¨ uyoruz.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Web Sayfasını x ve y boyutuyla d¨ u¸su ¨n¨ ursen, justify-content ile align-content’in ne yaptı˘ gını anlamak daha kolay olacaktır. Kısaca s¨ oylemek gerekirse, sorumlu oldu˘gu eksen dahilinde, elemanları sayfanın ba¸ska ba¸ska b¨olgelerine koyar.Sizden ricam justify-content ve align-content in hangi eksenlerden sorumlu oldu˘gunu s¨oylemeniz. L¨ utfen ¨ ornek u ¨zerinde gidiniz.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Web Sayfasını x ve y boyutuyla d¨ u¸su ¨n¨ ursen, justify-content ile align-content’in ne yaptı˘ gını anlamak daha kolay olacaktır. Kısaca s¨ oylemek gerekirse, sorumlu oldu˘gu eksen dahilinde, elemanları sayfanın ba¸ska ba¸ska b¨olgelerine koyar.Sizden ricam justify-content ve align-content in hangi eksenlerden sorumlu oldu˘gunu s¨oylemeniz. L¨ utfen ¨ ornek u ¨zerinde gidiniz. https://jsfiddle.net/fq6hf3f6/22/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Web Sayfasını x ve y boyutuyla d¨ u¸su ¨n¨ ursen, justify-content ile align-content’in ne yaptı˘ gını anlamak daha kolay olacaktır. Kısaca s¨ oylemek gerekirse, sorumlu oldu˘gu eksen dahilinde, elemanları sayfanın ba¸ska ba¸ska b¨olgelerine koyar.Sizden ricam justify-content ve align-content in hangi eksenlerden sorumlu oldu˘gunu s¨oylemeniz. L¨ utfen ¨ ornek u ¨zerinde gidiniz. https://jsfiddle.net/fq6hf3f6/22/ Flex-direction de˘ geri ¸su anda row olarak g¨oz¨ uk¨ uyor. Bunu column olarak de˘ gi¸stirip ”run” tu¸suna basınız. Ve ne oldu˘gunu g¨ ozlemleyiniz. Nasıl bir de˘ gi¸siklik oldu?
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Order’a ge¸cmeden ¨ once k¨ uc¸u ¨k bir bilgi vermenin faydalı oldu˘gunu d¨ u¸su ¨n¨ uyorum. Css’de direkt olarak bir elemanı se¸cerek i¸sler yapabilirsin. Mesela .selector.nth-child(2) dersen select class’ı olan 2. ¸cocu˘ gu se¸cer.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Order’a ge¸cmeden ¨ once k¨ uc¸u ¨k bir bilgi vermenin faydalı oldu˘gunu d¨ u¸su ¨n¨ uyorum. Css’de direkt olarak bir elemanı se¸cerek i¸sler yapabilirsin. Mesela .selector.nth-child(2) dersen select class’ı olan 2. ¸cocu˘ gu se¸cer. Order se¸cti˘ gin elemanın yerini de˘ gi¸stirmekte kullanılır. order:-1, 1 de˘ gerlerinden birini alır. A¸sa˘gıdaki ¨ornekte de˘ger de˘gi¸sikli˘ ginden sonra neler oldu˘ gunu l¨ utfen g¨ozlemleyin.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Order’a ge¸cmeden ¨ once k¨ uc¸u ¨k bir bilgi vermenin faydalı oldu˘gunu d¨ u¸su ¨n¨ uyorum. Css’de direkt olarak bir elemanı se¸cerek i¸sler yapabilirsin. Mesela .selector.nth-child(2) dersen select class’ı olan 2. ¸cocu˘ gu se¸cer. Order se¸cti˘ gin elemanın yerini de˘ gi¸stirmekte kullanılır. order:-1, 1 de˘ gerlerinden birini alır. A¸sa˘gıdaki ¨ornekte de˘ger de˘gi¸sikli˘ ginden sonra neler oldu˘ gunu l¨ utfen g¨ozlemleyin. https://jsfiddle.net/fq6hf3f6/23/ order:1 i order:-1 olarak de˘gi¸stirin.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Order’a ge¸cmeden ¨ once k¨ uc¸u ¨k bir bilgi vermenin faydalı oldu˘gunu d¨ u¸su ¨n¨ uyorum. Css’de direkt olarak bir elemanı se¸cerek i¸sler yapabilirsin. Mesela .selector.nth-child(2) dersen select class’ı olan 2. ¸cocu˘ gu se¸cer. Order se¸cti˘ gin elemanın yerini de˘ gi¸stirmekte kullanılır. order:-1, 1 de˘ gerlerinden birini alır. A¸sa˘gıdaki ¨ornekte de˘ger de˘gi¸sikli˘ ginden sonra neler oldu˘ gunu l¨ utfen g¨ozlemleyin. https://jsfiddle.net/fq6hf3f6/23/ order:1 i order:-1 olarak de˘gi¸stirin. 2 tane eleman se¸cerseniz verece˘ ginin sayının b¨ uy¨ ul¨ u˘gu ¨ ya da k¨ u¸cu ¨kl¨ u˘ gu ¨ne g¨ ore elemanları yerle¸stirilecektir. L¨ utfen linkteki ”comment out” ları kaldırıp, run tu¸suna basınız.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Order’a ge¸cmeden ¨ once k¨ uc¸u ¨k bir bilgi vermenin faydalı oldu˘gunu d¨ u¸su ¨n¨ uyorum. Css’de direkt olarak bir elemanı se¸cerek i¸sler yapabilirsin. Mesela .selector.nth-child(2) dersen select class’ı olan 2. ¸cocu˘ gu se¸cer. Order se¸cti˘ gin elemanın yerini de˘ gi¸stirmekte kullanılır. order:-1, 1 de˘ gerlerinden birini alır. A¸sa˘gıdaki ¨ornekte de˘ger de˘gi¸sikli˘ ginden sonra neler oldu˘ gunu l¨ utfen g¨ozlemleyin. https://jsfiddle.net/fq6hf3f6/23/ order:1 i order:-1 olarak de˘gi¸stirin. 2 tane eleman se¸cerseniz verece˘ ginin sayının b¨ uy¨ ul¨ u˘gu ¨ ya da k¨ u¸cu ¨kl¨ u˘ gu ¨ne g¨ ore elemanları yerle¸stirilecektir. L¨ utfen linkteki ”comment out” ları kaldırıp, run tu¸suna basınız. https://jsfiddle.net/fq6hf3f6/24/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Elemaı belli bir radio ile b¨ uy¨ ultecektir. flex-grow
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Elemaı belli bir radio ile b¨ uy¨ ultecektir. flex-grow Elemanı belli bir ratio ile k¨ u¸cu ¨ltecektir. flex-shrink
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Elemaı belli bir radio ile b¨ uy¨ ultecektir. flex-grow Elemanı belli bir ratio ile k¨ u¸cu ¨ltecektir. flex-shrink https://jsfiddle.net/hellyeah/fq6hf3f6/20/
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Elemaı belli bir radio ile b¨ uy¨ ultecektir. flex-grow Elemanı belli bir ratio ile k¨ u¸cu ¨ltecektir. flex-shrink https://jsfiddle.net/hellyeah/fq6hf3f6/20/ align-content ile b¨ uy¨ un bir kalıbın yerini de˘gi¸stirmi¸stik. S¸imdi yapaca˘ gımız ise bir tane elemanın yerini de˘gi¸stirmek olacak. Bunun i¸cin align-self i kullanaca˘gız. https://jsfiddle.net/4gjj6a61/3/. Parent container de flex-direction de˘ gerini de˘ gi¸stirirseniz. Align-self in her de˘ger i¸cin aynı sonucu u ¨retti˘ gini g¨ or¨ urs¨ un¨ uz.
Flexbox Sunumu powered by Latex Berat Emre Nebio˘ glu ˙Ileti¸sim Ne Kullanıcaz? C ¸ evrimi¸ci edit¨ orler.
Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Ba¸slamadan ¨ once bilmeniz gerekenler. Genel Kaynaklar -
Flexbox bizleri float, position, clearfix gibi karın a˘grısına sebep olacak yapılardan kurtarıp i¸simizi ¸cok kolayla¸stırdı˘gı i¸cin kullanılabilir gibi g¨ oz¨ uk¨ uyor. Te¸sekk¨ urler.