{"id":10242,"date":"2026-11-02T08:00:00","date_gmt":"2026-11-02T05:00:00","guid":{"rendered":"https:\/\/www.yunuskaytan.com\/?p=10242"},"modified":"2026-11-02T08:00:00","modified_gmt":"2026-11-02T05:00:00","slug":"css-de-flexbox-kullanimi","status":"publish","type":"post","link":"https:\/\/www.yunuskaytan.com\/en\/yk\/css-de-flexbox-kullanimi\/","title":{"rendered":"CSS&#8217;de Flexbox Kullan\u0131m\u0131"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Web tasar\u0131m\u0131n\u0131n ilk d\u00f6nemlerinde \u00f6\u011feleri yan yana getirmek ya da dikeyde ortalamak i\u00e7in tablo yap\u0131lar\u0131, kayd\u0131rma (float) kurallar\u0131 ve sat\u0131r i\u00e7i blok (inline-block) tan\u0131mlar\u0131 kullan\u0131l\u0131yordu. Bu y\u00f6ntemler karma\u015f\u0131k sayfa d\u00fczenlerinde beklenmedik bozulmalara ve temizlenmesi zor CSS hilelerine yol a\u00e7\u0131yordu. Modern web geli\u015ftirme standartlar\u0131n\u0131n bir par\u00e7as\u0131 olan css flexbox, yani Flexible Box Layout mod\u00fcl\u00fc, tek boyutlu d\u00fczenleme i\u015flemlerini pratik ve \u00f6ng\u00f6r\u00fclebilir hale getirdi. Bu rehberde css flexbox yap\u0131s\u0131n\u0131n \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131, kapsay\u0131c\u0131 ve alt \u00f6\u011fe \u00f6zelliklerini ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flexbox Mant\u0131\u011f\u0131: Eksenler ve Hiyerar\u015fi<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Flexbox sistemini anlaman\u0131n temel \u015fart\u0131, sistemin iki eksen \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 kavramakt\u0131r. Bu eksenler \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ana Eksen (Main Axis): \u00d6\u011felerin varsay\u0131lan dizilim do\u011frultusudur. flex-direction \u00f6zelli\u011fine ba\u011fl\u0131 olarak yatay (soldan sa\u011fa) veya dikey (yukar\u0131dan a\u015fa\u011f\u0131ya) olabilir.<\/li>\n\n<li>\u00c7apraz Eksen (Cross Axis): Ana eksene tam 90 derece dik olan eksendir. Ana eksen yataysa \u00e7apraz eksen dikey, ana eksen dikeyse \u00e7apraz eksen yatay \u00e7al\u0131\u015f\u0131r.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Flexbox sisteminde iki temel akt\u00f6r vard\u0131r: D\u0131\u015ftaki ana kapsay\u0131c\u0131 (flex container) ve bu kapsay\u0131c\u0131n\u0131n do\u011frudan i\u00e7inde yer alan alt \u00f6\u011feler (flex items). CSS \u00f6zellikleri de kapsay\u0131c\u0131ya uygulananlar ve do\u011frudan \u00f6\u011felere uygulananlar olarak ikiye ayr\u0131l\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flex Kapsay\u0131c\u0131 (Container) \u00d6zellikleri<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bir alan\u0131 Flexbox d\u00fczenine ge\u00e7irmek i\u00e7in ilgili HTML etiketine display de\u011feri atanmal\u0131d\u0131r. Bu i\u015flem yap\u0131ld\u0131\u011f\u0131 anda i\u00e7indeki t\u00fcm do\u011frudan \u00e7ocuklar birer flex \u00f6\u011fesi haline gelir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kapsayici {\n  display: flex;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu temel tan\u0131mlaman\u0131n ard\u0131ndan kapsay\u0131c\u0131n\u0131n davran\u0131\u015f\u0131n\u0131 belirleyen \u00f6zellikler devreye girer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. flex-direction<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6\u011felerin hangi y\u00f6nde dizilece\u011fini belirler. Ana eksenin y\u00f6n\u00fcn\u00fc tayin eder:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>row: Varsay\u0131lan de\u011ferdir. \u00d6\u011feleri soldan sa\u011fa yatay dizer.<\/li>\n\n<li>row-reverse: \u00d6\u011feleri sa\u011fdan sola yatay dizer.<\/li>\n\n<li>column: \u00d6\u011feleri yukar\u0131dan a\u015fa\u011f\u0131ya dikey dizer.<\/li>\n\n<li>column-reverse: \u00d6\u011feleri a\u015fa\u011f\u0131dan yukar\u0131ya dikey dizer.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. justify-content<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6\u011felerin ana eksen (main axis) \u00fczerindeki da\u011f\u0131l\u0131m\u0131n\u0131 y\u00f6netir. Bo\u015fluklar\u0131n nas\u0131l payla\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirler:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>flex-start: \u00d6\u011feleri eksenin ba\u015flang\u0131c\u0131na yaslar.<\/li>\n\n<li>flex-end: \u00d6\u011feleri eksenin biti\u015fine yaslar.<\/li>\n\n<li>center: \u00d6\u011feleri eksenin ortas\u0131nda toplar.<\/li>\n\n<li>space-between: \u0130lk \u00f6\u011feyi ba\u015fa, son \u00f6\u011feyi sona yaslar ve aradaki bo\u015flu\u011fu e\u015fit da\u011f\u0131t\u0131r.<\/li>\n\n<li>space-around: \u00d6\u011felerin her iki yan\u0131na e\u015fit bo\u015fluk b\u0131rak\u0131r.<\/li>\n\n<li>space-evenly: T\u00fcm \u00f6\u011felerin aras\u0131ndaki ve kenarlardaki bo\u015fluklar\u0131 tamamen e\u015fit da\u011f\u0131t\u0131r.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. align-items<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6\u011felerin \u00e7apraz eksen (cross axis) \u00fczerindeki hizalamas\u0131n\u0131 kontrol eder. Dikeyde ortalama problemi genellikle bu \u00f6zellikle \u00e7\u00f6z\u00fcl\u00fcr:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>stretch: Varsay\u0131lan de\u011ferdir. \u00d6\u011feler kapsay\u0131c\u0131n\u0131n y\u00fcksekli\u011fini dolduracak \u015fekilde uzar.<\/li>\n\n<li>flex-start: \u00c7apraz eksenin ba\u015flang\u0131c\u0131na hizalan\u0131r.<\/li>\n\n<li>flex-end: \u00c7apraz eksenin biti\u015fine hizalan\u0131r.<\/li>\n\n<li>center: \u00c7apraz eksende tam ortaya hizalan\u0131r.<\/li>\n\n<li>baseline: \u00d6\u011felerin i\u00e7erisindeki metin taban \u00e7izgilerine g\u00f6re hizalama yapar.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. flex-wrap ve gap<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Varsay\u0131lan olarak flex \u00f6\u011feleri tek bir sat\u0131ra s\u0131\u011fmaya \u00e7al\u0131\u015f\u0131r. E\u011fer \u00f6\u011felerin geni\u015fli\u011fi kapsay\u0131c\u0131y\u0131 a\u015f\u0131yorsa ta\u015fma veya k\u00fc\u00e7\u00fclme ger\u00e7ekle\u015fir. Bunu \u00f6nlemek i\u00e7in <code>flex-wrap: wrap;<\/code> tan\u0131mlan\u0131r. Bu kural, s\u0131\u011fmayan \u00f6\u011feleri bir alt sat\u0131ra aktar\u0131r.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6\u011feler aras\u0131na kenar bo\u015flu\u011fu vermek i\u00e7in ge\u00e7mi\u015fte margin kullan\u0131l\u0131rd\u0131. G\u00fcncel CSS standartlar\u0131nda kapsay\u0131c\u0131ya <code>gap<\/code> \u00f6zelli\u011fi verilerek \u00f6\u011felerin aras\u0131 net bir \u015fekilde a\u00e7\u0131labilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.menu {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Yukar\u0131daki kod blo\u011fu; men\u00fc \u00f6\u011felerini yatayda s\u0131ralar, aralar\u0131n\u0131 e\u015fit a\u00e7ar, dikeyde ortalar, ekrana s\u0131\u011fmad\u0131\u011f\u0131nda alt sat\u0131ra ge\u00e7irir ve her \u00f6\u011fe aras\u0131na yirmi\u015fer piksel bo\u015fluk ekler.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flex \u00d6\u011fesi (Item) \u00d6zellikleri<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kapsay\u0131c\u0131 genel yerle\u015fimi y\u00f6netirken, tekil \u00f6\u011felerin boyutlanma ve davran\u0131\u015f\u0131 do\u011frudan \u00f6\u011felere yaz\u0131lan kurallarla belirlenir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. flex-grow, flex-shrink ve flex-basis<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bu \u00fc\u00e7 \u00f6zellik, \u00f6\u011felerin esneklik mekanizmas\u0131n\u0131 do\u011frudan kontrol eder:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>flex-grow: Kapsay\u0131c\u0131da bo\u015f alan kald\u0131\u011f\u0131nda, \u00f6\u011fenin bu alandan ne oranda pay alarak b\u00fcy\u00fcyece\u011fini belirtir. Say\u0131sal de\u011fer al\u0131r. De\u011feri 0 olan \u00f6\u011fe b\u00fcy\u00fcmez.<\/li>\n\n<li>flex-shrink: Kapsay\u0131c\u0131 darald\u0131\u011f\u0131nda \u00f6\u011fenin di\u011ferlerine g\u00f6re ne kadar k\u00fc\u00e7\u00fclece\u011fini belirler. Varsay\u0131lan\u0131 1&#8217;dir.<\/li>\n\n<li>flex-basis: \u00d6\u011fenin esneme i\u015flemlerinden \u00f6nceki varsay\u0131lan ba\u015flang\u0131\u00e7 boyutunu tan\u0131mlar. Piksel veya y\u00fczde cinsinden verilebilir.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Bu \u00fc\u00e7 \u00f6zellik genellikle <code>flex<\/code> k\u0131sayoluyla birlikte yaz\u0131l\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ana-icerik {\n  flex: 3 1 0%;\n}\n\n.kenar-cubugu {\n  flex: 1 1 0%;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu \u00f6rnekte bo\u015f alan da\u011f\u0131t\u0131l\u0131rken ana i\u00e7erik 3 birim, kenar \u00e7ubu\u011fu ise 1 birim pay alacakt\u0131r. B\u00f6ylece 1\/4 ve 3\/4 oran\u0131nda esnek iki s\u00fctun olu\u015fturulur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. align-self<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tek bir \u00f6\u011fenin, kapsay\u0131c\u0131n\u0131n belirledi\u011fi <code>align-items<\/code> kural\u0131n\u0131 ezmesini (override etmesini) sa\u011flar. \u00d6rne\u011fin t\u00fcm \u00f6\u011feler ortalanm\u0131\u015fken sadece tek bir \u00f6\u011feyi tabana yaslamak i\u00e7in kullan\u0131l\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ozel-buton {\n  align-self: flex-end;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Pratik Bir \u00d6rnek: Bilgi Kart\u0131 D\u00fczeni<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML yap\u0131s\u0131nda yan yana \u00fc\u00e7 karttan olu\u015fan ve mobilde alt alta ge\u00e7ebilen bir d\u00fczen kural\u0131m.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML yap\u0131s\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=&quot;kart-grubu&quot;&gt;\n  &lt;div class=&quot;kart&quot;&gt;Kart 1&lt;\/div&gt;\n  &lt;div class=&quot;kart&quot;&gt;Kart 2&lt;\/div&gt;\n  &lt;div class=&quot;kart&quot;&gt;Kart 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS yap\u0131s\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kart-grubu {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n}\n\n.kart {\n  flex: 1 1 250px;\n  padding: 24px;\n  background-color: #f4f4f4;\n  border: 1px solid #ddd;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu \u00f6rnekte yer alan <code>flex: 1 1 250px;<\/code> kural\u0131 her kart\u0131n ba\u015flang\u0131\u00e7ta en az 250 piksel olmas\u0131n\u0131 sa\u011flar. Ekran geni\u015fledik\u00e7e kartlar bo\u015flu\u011fu dolduracak \u015fekilde e\u015fit oranda b\u00fcy\u00fcr (<code>flex-grow: 1<\/code>). Ekran geni\u015fli\u011fi kartlar\u0131n yan yana durmas\u0131na izin vermedi\u011finde <code>flex-wrap: wrap;<\/code> sayesinde s\u0131\u011fmayan kartlar otomatik olarak bir alt sat\u0131ra ge\u00e7er.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00d6zet ve Sonraki Ad\u0131mlar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS Flexbox, bile\u015fen bazl\u0131 aray\u00fczlerin, gezinti men\u00fclerinin, buton gruplar\u0131n\u0131n ve form alanlar\u0131n\u0131n h\u0131zl\u0131 ve esnek \u015fekilde kurgulanmas\u0131n\u0131 sa\u011flar. Tek boyutlu (yaln\u0131zca sat\u0131r ya da yaln\u0131zca s\u00fctun odakl\u0131) d\u00fczenlerde en ideal \u00e7\u00f6z\u00fcmd\u00fcr. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Flexbox mant\u0131\u011f\u0131n\u0131 peki\u015ftirdikten sonraki ad\u0131m, iki boyutlu (ayn\u0131 anda hem sat\u0131r hem s\u00fctun kontrol\u00fc gerektiren) karma\u015f\u0131k sayfa iskeletleri i\u00e7in geli\u015ftirilen CSS Grid yap\u0131s\u0131n\u0131 \u00f6\u011frenmektir. Modern \u00f6n y\u00fcz geli\u015ftirmede bu iki sistem birbirinin rakibi de\u011fil, birbirini tamamlayan ara\u00e7lard\u0131r.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS Flexbox mod\u00fcl\u00fc, web sayfalar\u0131nda \u00f6\u011feleri tek bir eksen \u00fczerinde kusursuz bi\u00e7imde hizalamay\u0131 sa\u011flar. Bu rehberde Flexbox yap\u0131s\u0131n\u0131 temelden \u00f6\u011freniyoruz.<\/p>","protected":false},"author":1,"featured_media":10243,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[226],"tags":[234,546,543,241,547],"class_list":["post-10242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-ve-css","tag-css","tag-flexbox","tag-frontend","tag-html","tag-web-tasarimi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS&#039;de Flexbox Kullan\u0131m\u0131 - Yunus KAYTAN<\/title>\n<meta name=\"description\" content=\"CSS Flexbox ile responsive ve esnek web aray\u00fczleri olu\u015fturmay\u0131 \u00f6\u011frenin. Temel eksen mant\u0131\u011f\u0131, kapsay\u0131c\u0131 ve \u00f6\u011fe \u00f6zellikleri kod \u00f6rnekleriyle anlat\u0131l\u0131yor.\" \/>\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.yunuskaytan.com\/en\/yk\/css-de-flexbox-kullanimi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS&#039;de Flexbox Kullan\u0131m\u0131 - Yunus KAYTAN\" \/>\n<meta property=\"og:description\" content=\"CSS Flexbox ile responsive ve esnek web aray\u00fczleri olu\u015fturmay\u0131 \u00f6\u011frenin. Temel eksen mant\u0131\u011f\u0131, kapsay\u0131c\u0131 ve \u00f6\u011fe \u00f6zellikleri kod \u00f6rnekleriyle anlat\u0131l\u0131yor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yunuskaytan.com\/en\/yk\/css-de-flexbox-kullanimi\/\" \/>\n<meta property=\"og:site_name\" content=\"Yunus KAYTAN\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-02T05:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/css-de-flexbox-kullanimi-kapak.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yunuskaytan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yunuskaytan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/\"},\"author\":{\"name\":\"yunuskaytan\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/person\\\/be66986fb499da83a5685de34f68d15a\"},\"headline\":\"CSS&#8217;de Flexbox Kullan\u0131m\u0131\",\"datePublished\":\"2026-11-02T05:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/\"},\"wordCount\":1019,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/css-de-flexbox-kullanimi-kapak.jpg\",\"keywords\":[\"css\",\"flexbox\",\"frontend\",\"html\",\"web tasarimi\"],\"articleSection\":[\"HTML ve CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/\",\"name\":\"CSS'de Flexbox Kullan\u0131m\u0131 - Yunus KAYTAN\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/css-de-flexbox-kullanimi-kapak.jpg\",\"datePublished\":\"2026-11-02T05:00:00+00:00\",\"description\":\"CSS Flexbox ile responsive ve esnek web aray\u00fczleri olu\u015fturmay\u0131 \u00f6\u011frenin. Temel eksen mant\u0131\u011f\u0131, kapsay\u0131c\u0131 ve \u00f6\u011fe \u00f6zellikleri kod \u00f6rnekleriyle anlat\u0131l\u0131yor.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/css-de-flexbox-kullanimi-kapak.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/css-de-flexbox-kullanimi-kapak.jpg\",\"width\":1200,\"height\":630,\"caption\":\"CSS'de Flexbox Kullan\u0131m\u0131\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/css-de-flexbox-kullanimi\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS&#8217;de Flexbox Kullan\u0131m\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#website\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\",\"name\":\"Yunus KAYTAN\",\"description\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yunuskaytan.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\",\"name\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/cropped-BILISIM-VE-SIBER-GUVENLIK.png\",\"contentUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/cropped-BILISIM-VE-SIBER-GUVENLIK.png\",\"width\":400,\"height\":109,\"caption\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/person\\\/be66986fb499da83a5685de34f68d15a\",\"name\":\"yunuskaytan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"caption\":\"yunuskaytan\"},\"sameAs\":[\"http:\\\/\\\/www.yunuskaytan.com\"],\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/en\\\/yk\\\/author\\\/yunuskaytan\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS'de Flexbox Kullan\u0131m\u0131 - Yunus KAYTAN","description":"CSS Flexbox ile responsive ve esnek web aray\u00fczleri olu\u015fturmay\u0131 \u00f6\u011frenin. Temel eksen mant\u0131\u011f\u0131, kapsay\u0131c\u0131 ve \u00f6\u011fe \u00f6zellikleri kod \u00f6rnekleriyle anlat\u0131l\u0131yor.","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.yunuskaytan.com\/en\/yk\/css-de-flexbox-kullanimi\/","og_locale":"en_US","og_type":"article","og_title":"CSS'de Flexbox Kullan\u0131m\u0131 - Yunus KAYTAN","og_description":"CSS Flexbox ile responsive ve esnek web aray\u00fczleri olu\u015fturmay\u0131 \u00f6\u011frenin. Temel eksen mant\u0131\u011f\u0131, kapsay\u0131c\u0131 ve \u00f6\u011fe \u00f6zellikleri kod \u00f6rnekleriyle anlat\u0131l\u0131yor.","og_url":"https:\/\/www.yunuskaytan.com\/en\/yk\/css-de-flexbox-kullanimi\/","og_site_name":"Yunus KAYTAN","article_published_time":"2026-11-02T05:00:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/css-de-flexbox-kullanimi-kapak.jpg","type":"image\/jpeg"}],"author":"yunuskaytan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yunuskaytan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#article","isPartOf":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/"},"author":{"name":"yunuskaytan","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/person\/be66986fb499da83a5685de34f68d15a"},"headline":"CSS&#8217;de Flexbox Kullan\u0131m\u0131","datePublished":"2026-11-02T05:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/"},"wordCount":1019,"commentCount":0,"publisher":{"@id":"https:\/\/www.yunuskaytan.com\/#organization"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/css-de-flexbox-kullanimi-kapak.jpg","keywords":["css","flexbox","frontend","html","web tasarimi"],"articleSection":["HTML ve CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/","url":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/","name":"CSS'de Flexbox Kullan\u0131m\u0131 - Yunus KAYTAN","isPartOf":{"@id":"https:\/\/www.yunuskaytan.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#primaryimage"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/css-de-flexbox-kullanimi-kapak.jpg","datePublished":"2026-11-02T05:00:00+00:00","description":"CSS Flexbox ile responsive ve esnek web aray\u00fczleri olu\u015fturmay\u0131 \u00f6\u011frenin. Temel eksen mant\u0131\u011f\u0131, kapsay\u0131c\u0131 ve \u00f6\u011fe \u00f6zellikleri kod \u00f6rnekleriyle anlat\u0131l\u0131yor.","breadcrumb":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#primaryimage","url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/css-de-flexbox-kullanimi-kapak.jpg","contentUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/css-de-flexbox-kullanimi-kapak.jpg","width":1200,"height":630,"caption":"CSS'de Flexbox Kullan\u0131m\u0131"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yunuskaytan.com\/yk\/css-de-flexbox-kullanimi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/www.yunuskaytan.com\/"},{"@type":"ListItem","position":2,"name":"CSS&#8217;de Flexbox Kullan\u0131m\u0131"}]},{"@type":"WebSite","@id":"https:\/\/www.yunuskaytan.com\/#website","url":"https:\/\/www.yunuskaytan.com\/","name":"Yunus KAYTAN","description":"Information Technology, Cybersecurity, Cybercrimes and Social Engineering","publisher":{"@id":"https:\/\/www.yunuskaytan.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yunuskaytan.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.yunuskaytan.com\/#organization","name":"Information Technology, Cybersecurity, Cybercrimes and Social Engineering","url":"https:\/\/www.yunuskaytan.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/2021\/07\/cropped-BILISIM-VE-SIBER-GUVENLIK.png","contentUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/2021\/07\/cropped-BILISIM-VE-SIBER-GUVENLIK.png","width":400,"height":109,"caption":"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/person\/be66986fb499da83a5685de34f68d15a","name":"yunuskaytan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","caption":"yunuskaytan"},"sameAs":["http:\/\/www.yunuskaytan.com"],"url":"https:\/\/www.yunuskaytan.com\/en\/yk\/author\/yunuskaytan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/comments?post=10242"}],"version-history":[{"count":1,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10242\/revisions"}],"predecessor-version":[{"id":10244,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10242\/revisions\/10244"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/media\/10243"}],"wp:attachment":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/media?parent=10242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/categories?post=10242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/tags?post=10242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}