{"id":15555,"date":"2024-05-09T01:06:55","date_gmt":"2024-05-08T21:36:55","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=15555"},"modified":"2024-05-09T01:06:55","modified_gmt":"2024-05-08T21:36:55","slug":"a-guide-to-flexbox","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/a-guide-to-flexbox\/","title":{"rendered":"Flexbox&#039;a \u0130li\u015fkin Tam K\u0131lavuz"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">girii\u015f<\/h2>\n<p>CSS flexbox d\u00fczenlerine y\u00f6nelik kapsaml\u0131 rehberimiz. Bu kapsaml\u0131 rehber, flexbox hakk\u0131nda her \u015feyi a\u00e7\u0131klayarak, ana \u00f6\u011fe (flex container) ve alt \u00f6\u011feler (flex items) i\u00e7in olas\u0131 t\u00fcm farkl\u0131 niteliklere odaklan\u0131yor. Ayr\u0131ca ge\u00e7mi\u015f, demolar, \u015fablonlar ve bir taray\u0131c\u0131 destek tablosu da i\u00e7eriyor.<\/p>\n<h2 id=\"%d8%b2%d9%85%db%8c%d9%86%d9%87\">Ba\u011flam<\/h2>\n<p>Flexbox d\u00fczen mod\u00fcl\u00fc (Ekim 2017&#039;den itibaren W3C aday \u00f6nerisi), boyutlar\u0131 bilinmese ve\/veya dinamik olsa bile (bu nedenle &quot;esnek&quot; kelimesi) bir konteyner i\u00e7indeki \u00f6\u011feler aras\u0131ndaki bo\u015flu\u011fu d\u00fczenlemek, hizalamak ve da\u011f\u0131tmak i\u00e7in daha verimli bir yol sa\u011flamay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n<p>Esnek bir d\u00fczenin arkas\u0131ndaki temel fikir, konteynerin \u00f6\u011felerinin geni\u015fli\u011fini\/y\u00fcksekli\u011fini (ve s\u0131ras\u0131n\u0131) mevcut alan\u0131 en iyi \u015fekilde dolduracak \u015fekilde de\u011fi\u015ftirmesine olanak tan\u0131makt\u0131r (\u00e7o\u011funlukla \u00e7e\u015fitli g\u00f6r\u00fcnt\u00fcleme ayg\u0131tlar\u0131na ve ekran boyutlar\u0131na uyum sa\u011flamak i\u00e7in). Esnek bir konteyner, \u00f6\u011feleri mevcut bo\u015f alan\u0131 dolduracak \u015fekilde geni\u015fletir veya ta\u015fmay\u0131 \u00f6nlemek i\u00e7in daralt\u0131r.<\/p>\n<p>En \u00f6nemlisi, flexbox d\u00fczeni, normal d\u00fczenlerin (yatay d\u00fczene g\u00f6re dikey olarak hizalanm\u0131\u015f ve sat\u0131r i\u00e7i bir blok) aksine, y\u00f6nl\u00fcd\u00fcr. Sayfalar i\u00e7in iyi \u00e7al\u0131\u015fsalar da, b\u00fcy\u00fck veya karma\u015f\u0131k uygulamalar\u0131 (\u00f6zellikle y\u00f6n de\u011fi\u015ftirme, yeniden boyutland\u0131rma, geni\u015fletme, daraltma vb. s\u00f6z konusu oldu\u011funda) destekleyecek esneklikten (kas\u0131tl\u0131 olarak kelime oyunu yap\u0131lmam\u0131\u015ft\u0131r) yoksundurlar.<\/p>\n<p>Not: Flexbox d\u00fczeni uygulama bile\u015fenleri ve k\u00fc\u00e7\u00fck \u00f6l\u00e7ekli d\u00fczenler i\u00e7in daha uygundur, Grid d\u00fczeni ise daha b\u00fcy\u00fck \u00f6l\u00e7ekli d\u00fczenler i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n<h2 id=\"%d9%85%d8%a8%d8%a7%d9%86%db%8c-%d9%88-%d8%a7%d8%b5%d8%b7%d9%84%d8%a7%d8%ad%d8%a7%d8%aa\">Temel bilgiler ve terminoloji<\/h2>\n<p>Flexbox tek bir \u00f6zellik de\u011fil, eksiksiz bir mod\u00fcl oldu\u011fundan, t\u00fcm \u00f6zellik seti de dahil olmak \u00fczere bir\u00e7ok \u00f6\u011feyi i\u00e7erir. Bunlardan baz\u0131lar\u0131 kapsay\u0131c\u0131ya (\u00fcst \u00f6\u011fe, &quot;esnek kapsay\u0131c\u0131&quot; olarak bilinir) ayarlanmak \u00fczere tasarlanm\u0131\u015ft\u0131r, di\u011ferleri ise alt \u00f6\u011felere (alt \u00f6\u011feler olarak bilinir, &quot;esnek \u00f6\u011feler&quot;) ayarlanmak \u00fczere tasarlanm\u0131\u015ft\u0131r.<\/p>\n<p>&quot;Normal&quot; d\u00fczen hem blok hem de hat i\u00e7i ak\u0131\u015f y\u00f6nlerine dayan\u0131yorsa, esnek d\u00fczen &quot;esnek ak\u0131\u015f y\u00f6nlerine&quot; dayan\u0131r. L\u00fctfen bu \u015fartname bi\u00e7imine bir g\u00f6z at\u0131n; esnek d\u00fczenin arkas\u0131ndaki ana fikri a\u00e7\u0131klar.<a href=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\"><\/a><\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\"  class=\"aligncenter pk-lazyload\"  width=\"680\"  height=\"319\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\" ><br \/>\n\u00d6\u011feler ana eksen boyunca (ana ba\u015flang\u0131\u00e7tan ana sona) veya \u00e7apraz eksen boyunca (\u00e7apraz ba\u015flang\u0131\u00e7tan \u00e7apraz uca) yerle\u015ftirilir.<\/p>\n<ul>\n<li>Ana eksen \u2013 Esnek kab\u0131n ana ekseni, esnek par\u00e7alar\u0131n yerle\u015ftirildi\u011fi birincil eksendir. Dikkatli olun, yatay olmas\u0131 gerekmez. Bu, flex-direction \u00f6zelli\u011fine ba\u011fl\u0131d\u0131r (a\u015fa\u011f\u0131ya bak\u0131n).<\/li>\n<li>Ana Ba\u015flang\u0131\u00e7 | Ana Son \u2013 Esnek \u00fcr\u00fcnler ana ba\u015flang\u0131\u00e7tan ba\u015flanarak ana uca do\u011fru konteynerin i\u00e7erisine yerle\u015ftirilir.<\/li>\n<li>Orijinal boyut \u2013 Esnek bir \u00f6\u011fenin geni\u015fli\u011fi veya y\u00fcksekli\u011fi, orijinal boyutta hangisiyse, \u00f6\u011fenin orijinal boyutudur. Esnek \u00f6\u011fenin orijinal boyut \u00f6zelli\u011fi, orijinal boyutta hangisiyse &quot;geni\u015flik&quot; veya &quot;y\u00fckseklik&quot; \u00f6zelli\u011fidir.<\/li>\n<li>\u00c7apraz eksen \u2013 Ana eksene dik olan eksene \u00e7apraz eksen denir. Y\u00f6n\u00fc, ana eksenin y\u00f6n\u00fcne ba\u011fl\u0131d\u0131r.<\/li>\n<li>\u00c7apraz ba\u015flang\u0131\u00e7 | \u00e7apraz son \u2013 Esnek hatlar, esnek kab\u0131n \u00e7apraz ba\u015flang\u0131\u00e7 taraf\u0131ndan ba\u015flanarak \u00e7apraz uca do\u011fru hareket ettirilerek \u00fcr\u00fcnlerle doldurulur ve kab\u0131n i\u00e7ine yerle\u015ftirilir.<\/li>\n<li>\u00c7apraz boyut \u2013 Esnek bir \u00f6\u011fenin geni\u015fli\u011fi veya y\u00fcksekli\u011fi, \u00e7apraz boyutta hangisi varsa, \u00f6\u011fenin \u00e7apraz boyutudur. \u00c7apraz boyut \u00f6zelli\u011fi, \u00e7apraz boyutta hangisi varsa, &quot;geni\u015flik&quot; veya &quot;y\u00fckseklik&quot;tir.<\/li>\n<\/ul>\n<h2 id=\"%d9%88%db%8c%da%98%da%af%db%8c-%d9%87%d8%a7%db%8c-%d9%81%d9%84%da%a9%d8%b3-%d8%a8%d8%a7%da%a9%d8%b3\">Flexbox \u00d6zellikleri<\/h2>\n<h5 id=\"%d8%ae%d9%88%d8%a7%d8%b5-%d8%a8%d8%b1%d8%a7%db%8c-%d9%be%d8%af%d8%b1-%d9%88-%d9%85%d8%a7%d8%af%d8%b1container\"><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/01-container.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/01-container.svg\" >Ebeveynler i\u00e7in \u00f6zellikler<br \/>\n(konteyner)<\/h5>\n<p>G\u00f6r\u00fcnt\u00fclemek<\/p>\n<p>Bu, esnek bir kapsay\u0131c\u0131 tan\u0131mlar. Verilen de\u011fere ba\u011fl\u0131 olarak sat\u0131r i\u00e7i veya blok halinde. T\u00fcm do\u011frudan alt \u00f6\u011feleri i\u00e7in esnek bir ba\u011flam sa\u011flar.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\ndisplay: flex; \/* or inline-flex *\/\r\n}<\/code><\/pre>\n<\/div>\n<h5 id=\"flex-direction\">esnek y\u00f6n<\/h5>\n<p><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flex-direction.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flex-direction.svg\" ><br \/>\nBu, birincil ekseni olu\u015fturur ve b\u00f6ylece esnek \u00f6\u011felerin esnek kutuya yerle\u015ftirilece\u011fi y\u00f6n\u00fc belirler. Esnek kutu (iste\u011fe ba\u011fl\u0131 sarma hari\u00e7) tek y\u00f6nl\u00fc bir d\u00fczen konseptidir. Esnek \u00f6\u011felerin \u00e7o\u011funlukla yatay s\u0131ralar veya dikey s\u00fctunlar halinde oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\nflex-direction: row | row-reverse | column | column-reverse;\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li>SATIR (varsay\u0131lan): Ltr&#039;de soldan sa\u011fa. Sa\u011fdan sola<\/li>\n<li>sat\u0131r-ters: uzunlamas\u0131nada sa\u011fdan sola. sa\u011fdan sola.<\/li>\n<li>S\u00dcTUN: Sat\u0131r gibi ancak yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru<\/li>\n<li>S\u00fctun-ters: Ters sat\u0131ra benzer ancak a\u015fa\u011f\u0131dan yukar\u0131ya do\u011fru<\/li>\n<\/ul>\n<h5 id=\"flex-wrap\">Esnek Sarma<\/h5>\n<p><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flex-wrap.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flex-wrap.svg\" ><br \/>\nVarsay\u0131lan olarak, esnek \u00f6\u011felerin t\u00fcm\u00fc tek bir sat\u0131ra s\u0131\u011fmaya \u00e7al\u0131\u015f\u0131r. Bunu de\u011fi\u015ftirebilir ve gerekirse \u00f6\u011felerin bu \u00f6zellik kullan\u0131larak kapat\u0131lmas\u0131na izin verebilirsiniz.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\nflex-wrap: nowrap | wrap | wrap-reverse;\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li>nowrap (varsay\u0131lan): T\u00fcm esnek \u00f6\u011feler tek bir sat\u0131ra sar\u0131lacak<\/li>\n<li>sarma: Esnek \u00f6\u011feler, yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru birden fazla sat\u0131ra sar\u0131l\u0131r.<\/li>\n<li>wrap-reverse: Esnek \u00f6\u011feler alttan \u00fcste do\u011fru birden fazla sat\u0131ra sar\u0131l\u0131r.<\/li>\n<\/ul>\n<h5 id=\"flex-flow\">FLEX-Flow<\/h5>\n<p>Bu, flex-direction ve flex-width \u00f6zelliklerinin k\u0131saltmas\u0131d\u0131r ve birlikte flex konteynerinin ana ve \u00e7apraz eksenlerini belirtir. Varsay\u0131lan de\u011fer row nowrap&#039;t\u0131r.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\nflex-flow: column wrap;\r\n}<\/code><\/pre>\n<\/div>\n<h5 id=\"justify-content\">\u0130\u00e7eri\u011fi Hakl\u0131 \u00c7\u0131kar<\/h5>\n<p><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/justify-content.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/justify-content.svg\" ><br \/>\nBu, ana eksen boyunca hizalamay\u0131 belirler. Bir sat\u0131rdaki t\u00fcm esnek \u00f6\u011feler esnek olmad\u0131\u011f\u0131nda veya esnek oldu\u011funda ancak maksimum boyutlar\u0131na ula\u015ft\u0131\u011f\u0131nda fazla beyaz bo\u015flu\u011fun da\u011f\u0131t\u0131lmas\u0131na yard\u0131mc\u0131 olur. Ayr\u0131ca, \u00f6\u011feler sat\u0131rdan ta\u015ft\u0131\u011f\u0131nda \u00f6\u011felerin hizalanmas\u0131 \u00fczerinde bir miktar kontrol sa\u011flar.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\njustify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li>flex-start (varsay\u0131lan): \u00d6\u011feler flex y\u00f6n\u00fcn\u00fcn ba\u015flang\u0131c\u0131na do\u011fru paketlenir.<\/li>\n<li>flex-end: \u00dcr\u00fcnler flex y\u00f6n\u00fcn\u00fcn sonuna do\u011fru paketlenir.<\/li>\n<li>BA\u015eLAT: \u00d6\u011feler yazma modu y\u00f6n\u00fcn\u00fcn ba\u015flang\u0131c\u0131na do\u011fru paketlenir.<\/li>\n<li>SON: \u00d6\u011feler yazma modu y\u00f6n\u00fcn\u00fcn sonuna do\u011fru paketlenir.<\/li>\n<li>SOL: \u00d6\u011feler, esnek y\u00f6nle uyumlu olmad\u0131\u011f\u0131 s\u00fcrece konteynerin sol kenar\u0131na do\u011fru paketlenir, o zaman ba\u015flang\u0131\u00e7 gibi davran\u0131r.<\/li>\n<li>SA\u011e: \u00d6\u011feler konteynerin sa\u011f kenar\u0131na do\u011fru paketlenir, ancak bu y\u00f6nde esnek olmak mant\u0131kl\u0131ysa, o zaman son gibi davran\u0131r.<\/li>\n<li>MERKEZ: \u00d6\u011feler \u00e7izgi boyunca ortalan\u0131r.<\/li>\n<li>Aradaki Bo\u015fluk: \u00d6\u011feler \u00e7izgi \u00fczerinde e\u015fit olarak da\u011f\u0131t\u0131l\u0131r. \u0130lk \u00f6\u011fe ba\u015flang\u0131\u00e7 \u00e7izgisinde, son \u00f6\u011fe biti\u015f \u00e7izgisinde bulunur.<\/li>\n<li>Bo\u015fluk-\u00c7evre: \u00d6\u011feler, etraflar\u0131nda e\u015fit bo\u015fluk olacak \u015fekilde bir \u00e7izgi \u00fczerinde e\u015fit olarak da\u011f\u0131t\u0131l\u0131r. G\u00f6rsel olarak bo\u015fluklar\u0131n e\u015fit olmad\u0131\u011f\u0131n\u0131 unutmay\u0131n, \u00e7\u00fcnk\u00fc t\u00fcm \u00f6\u011felerin her iki taraf\u0131nda da e\u015fit bo\u015fluk vard\u0131r. \u0130lk \u00f6\u011fenin kab\u0131n kenar\u0131nda bir birim bo\u015fluk olacak, ancak bir sonraki \u00f6\u011fenin kendi bo\u015flu\u011fu uyguland\u0131\u011f\u0131 i\u00e7in bir sonraki \u00f6\u011fe aras\u0131nda iki birim bo\u015fluk olacakt\u0131r.<\/li>\n<li>E\u015fit Aral\u0131k: \u00d6\u011feler, herhangi iki \u00f6\u011fe aras\u0131ndaki mesafenin (ve kenarlara olan mesafenin) e\u015fit olacak \u015fekilde da\u011f\u0131t\u0131l\u0131r.<\/li>\n<\/ul>\n<p>Bu de\u011ferlerle e\u015fle\u015ftirebilece\u011finiz iki ek anahtar kelime daha var: g\u00fcvenli ve g\u00fcvensiz. G\u00fcvenli kullanmak, bu t\u00fcr konumland\u0131rmay\u0131 nas\u0131l yaparsan\u0131z yap\u0131n, bir \u00f6\u011feyi sayfadan o kadar uza\u011fa (\u00f6rne\u011fin, sayfan\u0131n \u00fcst k\u0131sm\u0131ndan) itemeyece\u011finizden ve i\u00e7eri\u011fin kayd\u0131r\u0131lamayaca\u011f\u0131ndan emin olman\u0131z\u0131 sa\u011flar (&quot;veri kayb\u0131&quot; olarak bilinir).<\/p>\n<h5 id=\"align-items\">Hizala-\u00d6\u011feler<\/h5>\n<p><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/align-items.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/align-items.svg\" ><br \/>\nBu, esnek \u00f6\u011felerin ge\u00e7erli sat\u0131rdaki \u00e7apraz eksen boyunca nas\u0131l d\u00fczenlenece\u011finin varsay\u0131lan davran\u0131\u015f\u0131n\u0131 tan\u0131mlar. Bunu, \u00e7apraz eksenin (ana eksene dik) i\u00e7erik gerek\u00e7elendirme s\u00fcr\u00fcm\u00fc olarak d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\nalign-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li>STREtch (varsay\u0131lan): Kab\u0131 doldurmak i\u00e7in ger (h\u00e2l\u00e2 min\/maks geni\u015fli\u011fe sayg\u0131 g\u00f6sterir)<\/li>\n<li>flex-start \/ start \/ self-start: \u00d6\u011feler \u00e7apraz eksenin ba\u015f\u0131na yerle\u015ftirilir. Bunlar aras\u0131ndaki fark inceliklidir ve esneklik y\u00f6n\u00fc kurallar\u0131na veya yazma modu kurallar\u0131na uyulmas\u0131yla ilgilidir.<\/li>\n<li>flex-end \/ end \/ self-end: \u00d6\u011feler \u00e7apraz eksenin sonuna yerle\u015ftirilir. Aradaki fark yine inceliklidir ve flex y\u00f6n kurallar\u0131na uymakla, yazma modu kurallar\u0131na uymakla ilgilidir.<\/li>\n<li>MERKEZ: \u00d6\u011feler \u00e7apraz eksende yer al\u0131r<\/li>\n<li>TEMEL: \u00d6\u011feler, temel \u00e7izgileri gibi hizalan\u0131r<\/li>\n<\/ul>\n<h5 id=\"align-content\">ALign-\u0130\u00e7erik<\/h5>\n<p><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/align-content.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/10\/align-content.svg\" ><br \/>\n\u00c7apraz eksende fazladan bo\u015fluk oldu\u011funda, esnek kapsay\u0131c\u0131 \u00e7izgileri i\u00e7eride hizalar; t\u0131pk\u0131 justify-content&#039;in ana eksendeki bireysel \u00f6\u011feleri hizalamas\u0131na benzer.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\nalign-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li>Normal (varsay\u0131lan): \u00d6\u011feler, hi\u00e7bir de\u011fer ayarlanmam\u0131\u015f gibi varsay\u0131lan konumlar\u0131na paketlenir.<\/li>\n<li>flex-start \/ start: Konteynerin ba\u015f\u0131na sar\u0131lm\u0131\u015f \u00f6\u011feler. flex-start (daha fazla destekle) flex y\u00f6n\u00fcn\u00fc belirtirken, start yazma modu y\u00f6n\u00fcn\u00fc dikkate al\u0131r.<\/li>\n<li>flex-end \/ end: Konteynerin sonuna kadar sar\u0131lm\u0131\u015f \u00f6\u011feler. (Daha fazla destek) flex-end flex y\u00f6n\u00fcn\u00fc belirtirken end yazma modu y\u00f6n\u00fcn\u00fc dikkate al\u0131r.<\/li>\n<li>MERKEZ: Kab\u0131n merkezinde bulunan \u00f6\u011feler<\/li>\n<li>Bo\u015fluk-Aral\u0131k: \u00d6\u011feler e\u015fit aral\u0131klarla yerle\u015ftirilir. \u0130lk sat\u0131r kab\u0131n ba\u015f\u0131nda, son sat\u0131r ise kab\u0131n sonunda bulunur.<\/li>\n<li>Bo\u015fluk-\u00c7evre: \u00d6\u011feler her sat\u0131r\u0131n etraf\u0131nda e\u015fit bo\u015fluk olacak \u015fekilde e\u015fit \u015fekilde da\u011f\u0131t\u0131l\u0131r.<\/li>\n<li>E\u015fit Alan: \u00d6\u011feler etraflar\u0131nda e\u015fit bo\u015fluk olacak \u015fekilde e\u015fit \u015fekilde da\u011f\u0131t\u0131l\u0131r<\/li>\n<li>germek: Kalan alan\u0131 kaplamak i\u00e7in \u00e7izgiler gerilir.<\/li>\n<\/ul>\n<h5 id=\"gap-row-gap-column-gap\">Bo\u015fluk, Sat\u0131r Bo\u015flu\u011fu, S\u00fctun Bo\u015flu\u011fu<\/h5>\n<p><img  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/09\/gap-1.svg\"  class=\"pk-lazyload\"  data-pk-sizes=\"auto\"  data-pk-src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/09\/gap-1.svg\" ><br \/>\nBo\u015fluk \u00f6zelli\u011fi, esnek \u00f6\u011feler aras\u0131ndaki bo\u015flu\u011fu a\u00e7\u0131k\u00e7a kontrol eder. Bu bo\u015fluk yaln\u0131zca \u00f6\u011feler aras\u0131nda ge\u00e7erlidir, d\u0131\u015f kenarlarda ge\u00e7erli de\u011fildir.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\ndisplay: flex;\r\n...\r\ngap: 10px;\r\ngap: 10px 20px; \/* row-gap column gap *\/\r\nrow-gap: 10px;\r\ncolumn-gap: 20px;\r\n}<\/code><\/pre>\n<\/div>\n<p>Bu davran\u0131\u015f, minimal oluk olu\u015fumu olarak d\u00fc\u015f\u00fcn\u00fclebilir; yani, e\u011fer oluk bir \u015fekilde daha b\u00fcy\u00fckse (justify-content: spacing-between; gibi bir \u015feyden dolay\u0131), bu bo\u015fluk yaln\u0131zca o alan k\u00fc\u00e7\u00fcld\u00fc\u011f\u00fcnde etkili olacakt\u0131r.<\/p>\n<p>Bu sadece flexbox&#039;a \u00f6zg\u00fc bir durum de\u011fil, bo\u015fluklar \u0131zgara ve \u00e7ok s\u00fctunlu d\u00fczenlerde de i\u015fe yar\u0131yor.<\/p>\n<h2 id=\"%d9%be%db%8c%d8%b4%d9%88%d9%86%d8%af-flexbox\">Flexbox \u00f6neki<\/h2>\n<p>Flexbox, m\u00fcmk\u00fcn olan en fazla say\u0131da taray\u0131c\u0131y\u0131 desteklemek i\u00e7in baz\u0131 sat\u0131c\u0131 \u00f6neklerine ihtiya\u00e7 duyar. Bu, yaln\u0131zca niteliklerin \u00f6n\u00fcne sat\u0131c\u0131 \u00f6neki eklemekle kalmaz, ayn\u0131 zamanda tamamen farkl\u0131 \u00f6zellik adlar\u0131 ve de\u011ferlerine sahip olmay\u0131 da gerektirir. Bunun nedeni, Flexbox spesifikasyonunun zamanla de\u011fi\u015ferek &quot;eski&quot;, &quot;ara&quot; ve &quot;yeni&quot; s\u00fcr\u00fcmler olu\u015fturmas\u0131d\u0131r.<\/p>\n<p>Belki de bununla ba\u015fa \u00e7\u0131kman\u0131n en iyi yolu, yeni (ve son) s\u00f6zdizimini kullanmak ve CSS&#039;inizi, geri alma tu\u015flar\u0131n\u0131 iyi kullanan Autoprefixer&#039;dan ge\u00e7irmektir.<\/p>\n<p>Alternatif olarak, baz\u0131 \u00f6nekler konusunda yard\u0131mc\u0131 olmas\u0131 i\u00e7in bir Sass @mixin de var, bu da size ne t\u00fcr \u015feyler yapman\u0131z gerekti\u011fi konusunda fikir verecektir:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>@mixin flexbox() {\r\ndisplay: -webkit-box;\r\ndisplay: -moz-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: -webkit-flex;\r\ndisplay: flex;\r\n}\r\n@mixin flex($values) {\r\n-webkit-box-flex: $values;\r\n-moz-box-flex: $values;\r\n-webkit-flex: $values;\r\n-ms-flex: $values;\r\nflex: $values;\r\n}\r\n@mixin order($val) {\r\n-webkit-box-ordinal-group: $val; \r\n-moz-box-ordinal-group: $val; \r\n-ms-flex-order: $val; \r\n-webkit-order: $val; \r\norder: $val;\r\n}\r\n.wrapper {\r\n@include flexbox();\r\n}\r\n.item {\r\n@include flex(1 200px);\r\n@include order(2);\r\n}<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%ab%d8%a7%d9%84-%d9%87%d8%a7\">\u00d6rnekler<\/h2>\n<p>\u00c7ok, \u00e7ok basit bir \u00f6rnekle ba\u015flayal\u0131m; neredeyse g\u00fcnl\u00fck bir problemi \u00e7\u00f6zmeye \u00e7al\u0131\u015fal\u0131m: m\u00fckemmel odaklanma. Flexbox kullan\u0131yorsan\u0131z, bundan daha basit olamazd\u0131.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;ul class=\"navigation\"&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Products&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<\/div>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.parent {\r\ndisplay: flex;\r\nheight: 300px; \/* Or whatever *\/\r\n}\r\n.child {\r\nwidth: 100px; \/* Or whatever *\/\r\nheight: 100px; \/* Or whatever *\/\r\nmargin: auto; \/* Magic! *\/\r\n}<\/code><\/pre>\n<\/div>\n<p>Bunun nedeni, esnek bir kapta otomatik ayarlanan kenar bo\u015flu\u011funun ekstra alan kaplamas\u0131d\u0131r. Dolay\u0131s\u0131yla, otomatik ayarlanan kenar bo\u015flu\u011funu ayarlamak, \u00f6\u011fenin her iki eksende de m\u00fckemmel \u015fekilde ortalanmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>\u015eimdi birka\u00e7 \u00f6zellik daha kullanal\u0131m. Hepsi sabit boyutlara sahip, ancak otomatik boyutland\u0131r\u0131labilen 6 \u00f6\u011feden olu\u015fan bir liste d\u00fc\u015f\u00fcn\u00fcn. Taray\u0131c\u0131y\u0131 yeniden boyutland\u0131rd\u0131\u011f\u0131m\u0131zda, herhangi bir medya iste\u011fi olmadan her \u015feyin d\u00fczg\u00fcn bir \u015fekilde \u00f6l\u00e7eklenebilmesi i\u00e7in, \u00f6\u011felerin yatay eksende e\u015fit olarak da\u011f\u0131t\u0131lmas\u0131n\u0131 istiyoruz.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.flex-container {\r\n\/* We first create a flex layout context *\/\r\ndisplay: flex;\r\n\/* Then we define the flow direction \r\nand if we allow the items to wrap \r\n* Remember this is the same as:\r\n* flex-direction: row;\r\n* flex-wrap: wrap;\r\n*\/\r\nflex-flow: row wrap;\r\n\/* Then we define how is distributed the remaining space *\/\r\njustify-content: space-around;\r\n}<\/code><\/pre>\n<\/div>\n<p>Tamamd\u0131r. Geri kalan her \u015fey sadece bir stil meselesi. A\u015fa\u011f\u0131da bir kalem g\u00f6steriliyor. Ne olaca\u011f\u0131n\u0131 g\u00f6rmek i\u00e7in CodePen&#039;e gidip pencerelerinizin boyutunu de\u011fi\u015ftirmeyi unutmay\u0131n.<\/p>\n<p>Ba\u015fka bir \u015fey deneyelim. Web sitemizin \u00fcst k\u0131sm\u0131nda sa\u011fa hizalanm\u0131\u015f bir gezinme \u00f6\u011femiz oldu\u011funu, ancak bunu orta b\u00fcy\u00fckl\u00fckteki ekranlarda ortalay\u0131p k\u00fc\u00e7\u00fck cihazlarda tek bir s\u00fctun olarak g\u00f6r\u00fcnt\u00fclemek istedi\u011fimizi varsayal\u0131m. Yeterince basit.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Large *\/\r\n.navigation {\r\ndisplay: flex;\r\nflex-flow: row wrap;\r\n\/* This aligns items to the end line on main-axis *\/\r\njustify-content: flex-end;\r\n}\r\n\/* Medium screens *\/\r\n@media all and (max-width: 800px) {\r\n.navigation {\r\n\/* When on medium sized screens, we center it by evenly distributing empty space around items *\/\r\njustify-content: space-around;\r\n}\r\n}\r\n\/* Small screens *\/\r\n@media all and (max-width: 500px) {\r\n.navigation {\r\n\/* On small screens, we are no longer using row direction but column *\/\r\nflex-direction: column;\r\n}\r\n}<\/code><\/pre>\n<\/div>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"1081\"  height=\"249\"  class=\"aligncenter wp-image-15556 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 1081px) 100vw, 1081px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123.png\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123.png 1081w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-300x69.png 300w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-1024x236.png 1024w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-768x177.png 768w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-110x25.png 110w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-200x46.png 200w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-380x88.png 380w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-255x59.png 255w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-550x127.png 550w, https:\/\/cdn.itpiran.net\/2024\/05\/09005312\/123-800x184.png 800w\" ><\/p>\n<p>Esnek \u00f6\u011felerin esnekli\u011fiyle oynayarak daha iyisini deneyelim! Tam geni\u015flikte \u00fcstbilgi ve altbilgi i\u00e7eren, mobil \u00f6ncelikli 3 s\u00fctunlu bir d\u00fczen nas\u0131l olur? Hem de kaynak s\u0131ras\u0131ndan ba\u011f\u0131ms\u0131z.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=\"wrapper\"&gt;\r\n&lt;header class=\"header\"&gt;Header&lt;\/header&gt;\r\n&lt;article class=\"main\"&gt;\r\n&lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;\/p&gt; \r\n&lt;\/article&gt;\r\n&lt;aside class=\"aside aside-1\"&gt;Aside 1&lt;\/aside&gt;\r\n&lt;aside class=\"aside aside-2\"&gt;Aside 2&lt;\/aside&gt;\r\n&lt;footer class=\"footer\"&gt;Footer&lt;\/footer&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.wrapper {\r\ndisplay: flex;\r\nflex-flow: row wrap;\r\n}\r\n\r\n\/* We tell all items to be 100% width, via flex-basis *\/\r\n.wrapper &gt; * {\r\nflex: 1 100%;\r\n}\r\n\r\n\/* We rely on source order for mobile-first approach\r\n* in this case:\r\n* 1. header\r\n* 2. article\r\n* 3. aside 1\r\n* 4. aside 2\r\n* 5. footer\r\n*\/\r\n\/* Medium screens *\/\r\n@media all and (min-width: 600px) {\r\n\/* We tell both sidebars to share a row *\/\r\n.aside { flex: 1 auto; }\r\n}\r\n\/* Large screens *\/\r\n@media all and (min-width: 800px) {\r\n\/* We invert order of first sidebar and main\r\n* And tell the main element to take twice as much width as the other two sidebars\r\n*\/\r\n.main { flex: 3 0px; }\r\n.aside-1 { order: 1; }\r\n.main { order: 2; }\r\n.aside-2 { order: 3; }\r\n.footer { order: 4; }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"1165\"  height=\"344\"  class=\"aligncenter wp-image-15557 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 1165px) 100vw, 1165px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224.png\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224.png 1165w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-300x89.png 300w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-1024x302.png 1024w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-768x227.png 768w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-110x32.png 110w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-200x59.png 200w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-380x112.png 380w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-255x75.png 255w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-550x162.png 550w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-800x236.png 800w, https:\/\/cdn.itpiran.net\/2024\/05\/09005812\/44224-1160x343.png 1160w\" ><\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"CSS Flexbox d\u00fczenlerine y\u00f6nelik kapsaml\u0131 rehberimize giri\u015f. Bu kapsaml\u0131 rehber, Flexbox hakk\u0131nda her \u015feyi a\u00e7\u0131kl\u0131yor\u2026","protected":false},"author":1,"featured_media":15558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363,375],"tags":[374,418],"class_list":{"0":"post-15555","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"category-375","10":"tag-css","11":"tag-website"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS flexbox. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f flexbox \u062a\u0648\u0636\u06cc\u062d&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-08T21:36:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox\",\"datePublished\":\"2024-05-08T21:36:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"},\"wordCount\":96,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"keywords\":[\"css\",\"website\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\"\u0648\u0628 \u0633\u0627\u06cc\u062a\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\",\"name\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"datePublished\":\"2024-05-08T21:36:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tr\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox&#039;a \u0130li\u015fkin Eksiksiz K\u0131lavuz - ITPiran Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/a-guide-to-flexbox\/","og_locale":"tr_TR","og_type":"article","og_title":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS flexbox. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f flexbox \u062a\u0648\u0636\u06cc\u062d&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/a-guide-to-flexbox\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-05-08T21:36:55+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"admin","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox","datePublished":"2024-05-08T21:36:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"},"wordCount":96,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","keywords":["css","website"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc","\u0648\u0628 \u0633\u0627\u06cc\u062a"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/","name":"Flexbox&#039;a \u0130li\u015fkin Eksiksiz K\u0131lavuz - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","datePublished":"2024-05-08T21:36:55+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"\u0130ran S\u00fcrd\u00fcr\u00fclebilir Ticaret Haberleri ve Makaleleri","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"S\u00fcrd\u00fcr\u00fclebilir \u0130ran \u0130\u015fletmeleri Blogu","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"y\u00f6netici","url":"https:\/\/www.itpiran.net\/blog\/tr\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/15555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/comments?post=15555"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/15555\/revisions"}],"predecessor-version":[{"id":15559,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/15555\/revisions\/15559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media\/15558"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media?parent=15555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/categories?post=15555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/tags?post=15555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}