{"id":32096,"date":"2025-10-17T17:41:08","date_gmt":"2025-10-17T14:41:08","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32096"},"modified":"2025-10-17T17:41:08","modified_gmt":"2025-10-17T14:41:08","slug":"angular-uygulamalarinda-flex-layout-kullanimi-esnek-ve-duyarli-tasarimin-anahtari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-flex-layout-kullanimi-esnek-ve-duyarli-tasarimin-anahtari\/","title":{"rendered":"Angular Uygulamalar\u0131nda Flex Layout Kullan\u0131m\u0131: Esnek ve Duyarl\u0131 Tasar\u0131m\u0131n Anahtar\u0131"},"content":{"rendered":"

<\/p>\n

Angular Uygulamalar\u0131nda Flex Layout Kullan\u0131m\u0131: Esnek ve Duyarl\u0131 Tasar\u0131m\u0131n Anahtar\u0131<\/h2>\n

Giri\u015f: Angular Flex Layout Nedir ve Neden \u00d6nemlidir?<\/h3>\n

Modern web uygulamalar\u0131, farkl\u0131 ekran boyutlar\u0131na ve cihazlara sorunsuz bir \u015fekilde uyum sa\u011flayabilen duyarl\u0131 tasar\u0131mlara (responsive design) sahip olmak zorundad\u0131r. Geleneksel CSS y\u00f6ntemleri, \u00f6zellikle karma\u015f\u0131k d\u00fczenler olu\u015ftururken ve bu d\u00fczenleri duyarl\u0131 hale getirirken zorlay\u0131c\u0131 ve zaman al\u0131c\u0131 olabilmektedir. \u0130\u015fte tam bu noktada, Angular Flex Layout devreye girer.<\/p>\n

Angular Flex Layout, Google taraf\u0131ndan geli\u015ftirilen ve Angular uygulamalar\u0131nda CSS Flexbox’\u0131 do\u011frudan HTML \u015fablonlar\u0131na entegre eden bir k\u00fct\u00fcphanedir. Bu k\u00fct\u00fcphane, geli\u015ftiricilere HTML direktifleri arac\u0131l\u0131\u011f\u0131yla esnek kutu modelini (Flexbox) kullanma imkan\u0131 sunarak, karma\u015f\u0131k d\u00fczenleri h\u0131zl\u0131, verimli ve duyarl\u0131 bir \u015fekilde olu\u015fturmalar\u0131n\u0131 sa\u011flar. CSS Flexbox’\u0131n t\u00fcm g\u00fcc\u00fcn\u00fc, do\u011frudan Angular’\u0131n bile\u015fen tabanl\u0131 yap\u0131s\u0131na ta\u015f\u0131yarak, stil dosyalar\u0131 aras\u0131nda gidip gelme ihtiyac\u0131n\u0131 azalt\u0131r ve daha okunabilir, s\u00fcrd\u00fcr\u00fclebilir kod yaz\u0131m\u0131na olanak tan\u0131r.<\/p>\n

Peki, Angular Flex Layout’u neden kullanmal\u0131y\u0131z?
\n* H\u0131z ve Verimlilik:<\/strong> CSS yazmak yerine do\u011frudan HTML i\u00e7inde direktiflerle d\u00fczenleme yapmak, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.
\n* Duyarl\u0131l\u0131k (Responsiveness):<\/strong> Farkl\u0131 ekran boyutlar\u0131 i\u00e7in \u00f6zel direktifler (\u00f6rne\u011fin, fxLayout.sm<\/code>, fxFlex.md<\/code>) sayesinde duyarl\u0131 tasar\u0131mlar olu\u015fturmak son derece kolayla\u015f\u0131r.
\n* Okunabilirlik:<\/strong> D\u00fczen mant\u0131\u011f\u0131 do\u011frudan \u015fablon dosyas\u0131nda g\u00f6r\u00fcld\u00fc\u011f\u00fc i\u00e7in kod daha anla\u015f\u0131l\u0131r hale gelir.
\n* Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> CSS dosyalar\u0131 \u015fi\u015fmek yerine, d\u00fczenle ilgili kurallar bile\u015fen \u015fablonlar\u0131nda merkezi bir \u015fekilde y\u00f6netilir.
\n* Bile\u015fen Tabanl\u0131 Yakla\u015f\u0131m:<\/strong> Angular’\u0131n do\u011fas\u0131na uygun olarak, her bir bile\u015fenin kendi d\u00fczenini kolayca y\u00f6netmesini sa\u011flar.<\/p>\n

Bu makalede, Angular Flex Layout’un kurulumundan ba\u015flayarak temel ve geli\u015fmi\u015f direktiflerine, duyarl\u0131 tasar\u0131m yeteneklerine ve en iyi kullan\u0131m pratiklerine kadar her y\u00f6n\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, Angular projelerinizde esnek ve duyarl\u0131 aray\u00fczler olu\u015fturmak i\u00e7in Flex Layout’u etkin bir \u015fekilde kullanman\u0131z\u0131 sa\u011flamakt\u0131r.<\/p>\n

Flex Layout Kurulumu ve Temel Kullan\u0131m<\/h3>\n

Angular Flex Layout’u projenize dahil etmek olduk\u00e7a basittir. A\u015fa\u011f\u0131daki ad\u0131mlar\u0131 takip ederek kurulumu ger\u00e7ekle\u015ftirebilirsiniz:<\/p>\n

Kurulum Ad\u0131mlar\u0131<\/h4>\n

1. Paketi Y\u00fckleme:<\/strong> Angular CLI kullanarak projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

\n    npm install @angular\/flex-layout @angular\/cdk --save\n    <\/code><\/pre>\n
    @angular\/cdk<\/code> paketi, Flex Layout’un baz\u0131 temel i\u015flevsellikleri i\u00e7in bir ba\u011f\u0131ml\u0131l\u0131kt\u0131r, bu y\u00fczden onu da y\u00fcklememiz gerekir.<\/p>\n
2.  Mod\u00fcl\u00fc \u0130\u00e7eri Aktarma:<\/strong> app.module.ts<\/code> (veya Flex Layout’u kullanaca\u011f\u0131n\u0131z herhangi bir mod\u00fcl) dosyan\u0131za FlexLayoutModule<\/code>‘\u00fc i\u00e7eri aktar\u0131n ve imports<\/code> dizisine ekleyin:<\/p>\n
\n    import { NgModule } from '@angular\/core';\n    import { BrowserModule } from '@angular\/platform-browser';\n    import { FlexLayoutModule } from '@angular\/flex-layout'; \/\/ Bu sat\u0131r\u0131 ekleyin\n\n    import { AppComponent } from '.\/app.component';\n\n    @NgModule({\n      declarations: [\n        AppComponent\n      ],\n      imports: [\n        BrowserModule,\n        FlexLayoutModule \/\/ Buraya ekleyin\n      ],\n      providers: [],\n      bootstrap: [AppComponent]\n    })\n    export class AppModule { }\n    <\/code><\/pre>\n
    Bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra, projenizde Flex Layout direktiflerini kullanmaya ba\u015flayabilirsiniz.<\/p>\n
Temel Flex Container Direktifleri<\/h4>\n
Flexbox modelinde, \u00f6\u011feleri d\u00fczenlemek i\u00e7in bir “konteyner” (container) ve bu konteyner i\u00e7indeki “\u00f6\u011feler” (items) kavramlar\u0131 bulunur. Angular Flex Layout’ta da bu yap\u0131 korunur. \u0130lk olarak, bir HTML \u00f6\u011fesini Flex konteynerine d\u00f6n\u00fc\u015ft\u00fcren direktifleri inceleyelim.<\/p>\n
fxLayout<\/code><\/h5>\n
Bu direktif, bir HTML \u00f6\u011fesini bir Flex konteynerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve i\u00e7indeki \u00f6\u011felerin hangi y\u00f6nde s\u0131ralanaca\u011f\u0131n\u0131 belirler. Temel de\u011ferleri \u015funlard\u0131r:
\n*   row<\/code> (varsay\u0131lan): \u00d6\u011feleri yatay olarak (soldan sa\u011fa) s\u0131ralar.
\n*   column<\/code>: \u00d6\u011feleri dikey olarak (yukar\u0131dan a\u015fa\u011f\u0131ya) s\u0131ralar.
\n*   row-reverse<\/code>: \u00d6\u011feleri yatay olarak tersten (sa\u011fdan sola) s\u0131ralar.
\n*   column-reverse<\/code>: \u00d6\u011feleri dikey olarak tersten (a\u015fa\u011f\u0131dan yukar\u0131ya) s\u0131ralar.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1<\/div>\n  
\u00d6\u011fe 2<\/div>\n  
\u00d6\u011fe 3<\/div>\n<\/div>\n\n
\n  
\u00d6\u011fe A<\/div>\n  
\u00d6\u011fe B<\/div>\n<\/div>\n<\/code><\/pre>\n
fxLayoutAlign<\/code><\/h5>\n
Bu direktif, bir Flex konteyner i\u00e7indeki \u00f6\u011felerin ana eksen (main axis) ve \u00e7apraz eksen (cross axis) boyunca nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler. \u0130ki de\u011fer al\u0131r: ilki ana eksen, ikincisi \u00e7apraz eksen i\u00e7indir.<\/p>\n
Ana Eksen (Main Axis) Hizalama De\u011ferleri:<\/strong>
\n*   start<\/code>: \u00d6\u011feleri ana eksenin ba\u015f\u0131na hizalar.
\n*   center<\/code>: \u00d6\u011feleri ana eksenin ortas\u0131na hizalar.
\n*   end<\/code>: \u00d6\u011feleri ana eksenin sonuna hizalar.
\n*   space-around<\/code>: \u00d6\u011feler aras\u0131nda ve kenarlar\u0131nda e\u015fit bo\u015fluk b\u0131rak\u0131r.
\n*   space-between<\/code>: \u00d6\u011feler aras\u0131na e\u015fit bo\u015fluk b\u0131rak\u0131r, kenarlarda bo\u015fluk olmaz.
\n*   space-evenly<\/code>: \u00d6\u011feler aras\u0131nda ve kenarlar\u0131nda tamamen e\u015fit bo\u015fluk b\u0131rak\u0131r.<\/p>\n
\u00c7apraz Eksen (Cross Axis) Hizalama De\u011ferleri:<\/strong>
\n*   start<\/code>: \u00d6\u011feleri \u00e7apraz eksenin ba\u015f\u0131na hizalar.
\n*   center<\/code>: \u00d6\u011feleri \u00e7apraz eksenin ortas\u0131na hizalar.
\n*   end<\/code>: \u00d6\u011feleri \u00e7apraz eksenin sonuna hizalar.
\n*   stretch<\/code> (varsay\u0131lan): \u00d6\u011feleri \u00e7apraz eksen boyunca dolduracak \u015fekilde uzat\u0131r.
\n*   baseline<\/code>: \u00d6\u011feleri metin taban \u00e7izgilerine g\u00f6re hizalar.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1<\/div>\n  
\u00d6\u011fe 2<\/div>\n  
\u00d6\u011fe 3<\/div>\n<\/div>\n<\/code><\/pre>\n
Bu \u00f6rnekte, \u00f6\u011feler yatayda e\u015fit aral\u0131klarla da\u011f\u0131t\u0131l\u0131rken, dikeyde ortalan\u0131r.<\/p>\n
fxLayoutGap<\/code><\/h5>\n
Bu direktif, bir Flex konteyneri i\u00e7indeki \u00f6\u011feler aras\u0131na bo\u015fluk (gap) ekler. CSS gap<\/code> \u00f6zelli\u011fi gibi \u00e7al\u0131\u015f\u0131r. De\u011fer olarak bir CSS boyutu (\u00f6rn. 10px<\/code>, 1rem<\/code>, 5%<\/code>) al\u0131r.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1<\/div>\n  
\u00d6\u011fe 2<\/div>\n  
\u00d6\u011fe 3<\/div>\n<\/div>\n<\/code><\/pre>\n
Bu, her bir \u00f6\u011fe aras\u0131na 20 piksellik bir bo\u015fluk ekleyecektir.<\/p>\n
fxLayoutWrap<\/code><\/h5>\n
Flex \u00f6\u011felerinin konteynerin boyutunu a\u015ft\u0131\u011f\u0131nda bir sonraki sat\u0131ra ge\u00e7ip ge\u00e7meyece\u011fini kontrol eder.
\n*   wrap<\/code>: \u00d6\u011felerin yeni bir sat\u0131ra kaymas\u0131na izin verir.
\n*   nowrap<\/code> (varsay\u0131lan): \u00d6\u011felerin tek bir sat\u0131rda kalmas\u0131n\u0131 sa\u011flar ve ta\u015farsa s\u0131k\u0131\u015fmalar\u0131na neden olabilir.
\n*   wrap-reverse<\/code>: \u00d6\u011felerin ters y\u00f6nde yeni bir sat\u0131ra kaymas\u0131na izin verir.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
K\u0131sa \u00d6\u011fe<\/div>\n  
Uzun \u00d6\u011fe<\/div>\n  
Ba\u015fka \u00d6\u011fe<\/div>\n<\/div>\n<\/code><\/pre>\n
Bu \u00f6rnekte, konteyner 200 piksel geni\u015fli\u011finde oldu\u011fundan, \u00f6\u011feler s\u0131\u011fmad\u0131\u011f\u0131nda alt sat\u0131ra ge\u00e7ecektir.<\/p>\n
Temel Flex Item Direktifleri<\/h4>\n
Flex konteynerlerin i\u00e7indeki her bir \u00f6\u011fe i\u00e7in \u00f6zel davran\u0131\u015flar tan\u0131mlayan direktiflerdir.<\/p>\n
fxFlex<\/code><\/h5>\n
Bu direktif, bir Flex \u00f6\u011fesinin konteyner i\u00e7indeki bo\u015f alan\u0131 nas\u0131l dolduraca\u011f\u0131n\u0131, b\u00fcy\u00fcme, k\u00fc\u00e7\u00fclme ve ba\u015flang\u0131\u00e7 boyutunu belirler. Bu, Flex Layout’un en g\u00fc\u00e7l\u00fc ve s\u0131k kullan\u0131lan direktiflerinden biridir. flex<\/code> CSS \u00f6zelli\u011finin k\u0131saltmas\u0131d\u0131r (flex-grow<\/code>, flex-shrink<\/code>, flex-basis<\/code>).<\/p>\n
*   De\u011ferler:<\/strong>
\n    *   Say\u0131sal De\u011fer (\u00f6rn. fxFlex=\"50\"<\/code>):<\/strong> \u00d6\u011fenin ba\u015flang\u0131\u00e7 boyutunu y\u00fczde olarak belirler (bu durumda %50). Ayr\u0131ca flex-grow<\/code> ve flex-shrink<\/code> de\u011ferlerini de 1<\/code> olarak ayarlar. Yani, flex: 1 1 50%<\/code> anlam\u0131na gelir.
\n    *   CSS Boyut Birimi (\u00f6rn. fxFlex=\"200px\"<\/code>, fxFlex=\"3rem\"<\/code>):<\/strong> \u00d6\u011fenin ba\u015flang\u0131\u00e7 boyutunu sabit bir de\u011ferle belirler. flex: 1 1 200px<\/code> anlam\u0131na gelir.
\n    *   auto<\/code>:<\/strong> \u00d6\u011fenin i\u00e7eri\u011fine g\u00f6re boyutlanmas\u0131n\u0131 sa\u011flar (flex: 1 1 auto<\/code>).
\n    *   none<\/code>:<\/strong> \u00d6\u011fenin b\u00fcy\u00fcmesini veya k\u00fc\u00e7\u00fclmesini engeller, sadece ba\u015flang\u0131\u00e7 boyutunu kullan\u0131r (flex: 0 0 auto<\/code>).
\n    *   grow<\/code>:<\/strong> \u00d6\u011fenin bo\u015f alan\u0131 doldurmak i\u00e7in b\u00fcy\u00fcmesine izin verir (flex: 1 1 0%<\/code>).
\n    *   nogrow<\/code>:<\/strong> \u00d6\u011fenin b\u00fcy\u00fcmesini engeller (flex: 0 1 auto<\/code>).
\n    *   shrink<\/code>:<\/strong> \u00d6\u011fenin k\u00fc\u00e7\u00fclmesine izin verir (flex: 1 1 auto<\/code>).
\n    *   noshrink<\/code>:<\/strong> \u00d6\u011fenin k\u00fc\u00e7\u00fclmesini engeller (flex: 1 0 auto<\/code>).
\n    *   K\u0131saltma (\u00f6rn. fxFlex=\"1 1 200px\"<\/code>):<\/strong> flex-grow<\/code>, flex-shrink<\/code>, flex-basis<\/code> de\u011ferlerini do\u011frudan belirtebilirsiniz.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00c7eyrek Geni\u015flik<\/div>\n  
Yar\u0131 Geni\u015flik<\/div>\n  
\u00c7eyrek Geni\u015flik<\/div>\n<\/div>\n\n
\n  
B\u00fcy\u00fcr ama k\u00fc\u00e7\u00fclmez<\/div>\n  
B\u00fcy\u00fcmez ama k\u00fc\u00e7\u00fcl\u00fcr<\/div>\n  
Sabit 100px<\/div>\n<\/div>\n<\/code><\/pre>\n
fxFlexOrder<\/code><\/h5>\n
Bu direktif, Flex \u00f6\u011felerinin g\u00f6rsel s\u0131ralamas\u0131n\u0131 de\u011fi\u015ftirir. De\u011fer olarak bir tam say\u0131 al\u0131r. Daha d\u00fc\u015f\u00fck order<\/code> de\u011ferine sahip \u00f6\u011feler, daha y\u00fcksek de\u011fere sahip \u00f6\u011felerden \u00f6nce g\u00f6r\u00fcn\u00fcr. Varsay\u0131lan de\u011fer 0<\/code>‘d\u0131r.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1 (\u0130kinci G\u00f6r\u00fcn\u00fcr)<\/div>\n  
\u00d6\u011fe 2 (\u0130lk G\u00f6r\u00fcn\u00fcr)<\/div>\n  
\u00d6\u011fe 3 (\u00dc\u00e7\u00fcnc\u00fc G\u00f6r\u00fcn\u00fcr)<\/div>\n<\/div>\n<\/code><\/pre>\n
fxFlexOffset<\/code><\/h5>\n
Bu direktif, Flex \u00f6\u011fesinin sol taraf\u0131na bir bo\u015fluk (offset) ekler. De\u011fer olarak bir CSS boyutu (\u00f6rn. 20px<\/code>, 10%<\/code>) al\u0131r.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1<\/div>\n  
\u00d6\u011fe 2 (30px uzakta)<\/div>\n  
\u00d6\u011fe 3<\/div>\n<\/div>\n<\/code><\/pre>\n
fxFlexFill<\/code><\/h5>\n
Bu direktif, bir Flex \u00f6\u011fesinin hem yatay hem de dikey olarak ebeveynini tamamen doldurmas\u0131n\u0131 sa\u011flar. Genellikle tek bir \u00f6\u011fenin konteyneri tamamen kaplamas\u0131 istendi\u011finde kullan\u0131l\u0131r. fxFlex=\"100\"<\/code> ve height: 100%<\/code> kombinasyonuna benzer.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
Bu \u00f6\u011fe konteyneri doldurur.<\/div>\n<\/div>\n<\/code><\/pre>\n
fxFlexAlign<\/code><\/h5>\n
Tek bir Flex \u00f6\u011fesinin \u00e7apraz eksen boyunca hizalanmas\u0131n\u0131 ge\u00e7ersiz k\u0131lar. align-self<\/code> CSS \u00f6zelli\u011fine kar\u015f\u0131l\u0131k gelir. De\u011ferleri start<\/code>, center<\/code>, end<\/code>, stretch<\/code>, baseline<\/code> olabilir.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1<\/div>\n  
\u00d6\u011fe 2 (A\u015fa\u011f\u0131da)<\/div>\n  
\u00d6\u011fe 3<\/div>\n<\/div>\n<\/code><\/pre>\n
Duyarl\u0131 (Responsive) Tasar\u0131m ile Flex Layout<\/h3>\n
Angular Flex Layout’un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, duyarl\u0131 tasar\u0131mlar olu\u015fturmak i\u00e7in sundu\u011fu kolayl\u0131kt\u0131r. Direktiflere .breakpoint<\/code> soneki ekleyerek, belirli ekran boyutlar\u0131 veya y\u00f6nelimleri i\u00e7in farkl\u0131 d\u00fczen kurallar\u0131 tan\u0131mlayabilirsiniz. Flex Layout, varsay\u0131lan olarak a\u015fa\u011f\u0131daki medya sorgusu breakpoint’lerini destekler:<\/p>\n
*   xs<\/code>: Ekstra k\u00fc\u00e7\u00fck ekranlar (0px – 599px)
\n*   sm<\/code>: K\u00fc\u00e7\u00fck ekranlar (600px – 959px)
\n*   md<\/code>: Orta ekranlar (960px – 1279px)
\n*   lg<\/code>: B\u00fcy\u00fck ekranlar (1280px – 1919px)
\n*   xl<\/code>: Ekstra b\u00fcy\u00fck ekranlar (1920px ve \u00fczeri)<\/p>\n
Ayr\u0131ca, aral\u0131klar\u0131 belirten \u00f6zel breakpoint’ler de mevcuttur:
\n*   lt-sm<\/code>: K\u00fc\u00e7\u00fckten az (0px – 599px)
\n*   gt-sm<\/code>: K\u00fc\u00e7\u00fckten fazla (960px ve \u00fczeri)
\n*   lt-md<\/code>: Ortadan az (0px – 959px)
\n*   gt-md<\/code>: Ortadan fazla (1280px ve \u00fczeri)
\n*   Ve benzerleri (lt-lg<\/code>, gt-lg<\/code>, lt-xl<\/code>, gt-xl<\/code>).<\/p>\n
Duyarl\u0131 Direktif Kullan\u0131m\u0131<\/h4>\n
Herhangi bir Flex Layout direktifini duyarl\u0131 hale getirmek i\u00e7in, direktif ad\u0131n\u0131n sonuna bir nokta (.<\/code>) ve ard\u0131ndan breakpoint ad\u0131n\u0131 eklersiniz.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
\u00d6\u011fe 1<\/div>\n  
\u00d6\u011fe 2<\/div>\n  
\u00d6\u011fe 3<\/div>\n<\/div>\n<\/code><\/pre>\n
Bu \u00f6rnekte:
\n*   Varsay\u0131lan olarak (ekran boyutu gt-sm<\/code>‘den k\u00fc\u00e7\u00fckse), \u00f6\u011feler dikey olarak s\u0131ralan\u0131r ve her biri tam geni\u015flik (fxFlex=\"100\"<\/code>) al\u0131r.
\n*   Ekran boyutu gt-sm<\/code> (960px ve \u00fczeri) oldu\u011funda, \u00f6\u011feler yatay olarak s\u0131ralan\u0131r (fxLayout.gt-sm=\"row\"<\/code>) ve her biri e\u015fit geni\u015flikte (fxFlex.gt-sm=\"33.33\"<\/code>) yer al\u0131r.<\/p>\n
Bu yakla\u015f\u0131m, mobil \u00f6ncelikli (mobile-first) tasar\u0131m felsefesine m\u00fckemmel bir \u015fekilde uyar. Varsay\u0131lan de\u011ferleri en k\u00fc\u00e7\u00fck ekranlar i\u00e7in tan\u0131mlay\u0131p, daha b\u00fcy\u00fck ekranlar i\u00e7in bu de\u011ferleri ge\u00e7ersiz k\u0131labilirsiniz.<\/p>\n
fxHide<\/code> ve fxShow<\/code> ile Element Gizleme\/G\u00f6sterme<\/h4>\n
Bu direktifler, belirli breakpoint’lerde bir \u00f6\u011feyi gizlemek veya g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.
\n*   fxHide<\/code>: \u00d6\u011feyi gizler.
\n*   fxShow<\/code>: \u00d6\u011feyi g\u00f6sterir.<\/p>\n
Her ikisi de duyarl\u0131 eklerle kullan\u0131labilir.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
\n
\n  
Bu ba\u015fl\u0131k sadece mobil ekranlarda gizlenir.<\/h3>\n  
Bu paragraf sadece k\u00fc\u00e7\u00fck ve orta ekranlarda g\u00f6r\u00fcn\u00fcr.<\/p>\n