{"id":37542,"date":"2026-01-08T11:41:49","date_gmt":"2026-01-08T08:41:49","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37542"},"modified":"2026-01-08T11:41:49","modified_gmt":"2026-01-08T08:41:49","slug":"flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/","title":{"rendered":"Flexbox’a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri"},"content":{"rendered":"

<\/p>\n

Web tasar\u0131m\u0131nda \u00f6\u011feleri do\u011fru bir \u015fekilde hizalamak, kullan\u0131c\u0131 deneyimi ve g\u00f6rsel estetik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS’in ilk g\u00fcnlerinden bu yana geli\u015ftiriciler, bloklar\u0131, metinleri ve resimleri sayfa \u00fczerinde istenen konuma getirmek i\u00e7in \u00e7e\u015fitli y\u00f6ntemlerle m\u00fccadele ettiler. Geleneksel yakla\u015f\u0131mlar (margin: auto<\/code>, text-align<\/code>, position<\/code> \u00f6zellikleri) genellikle s\u0131n\u0131rl\u0131 veya karma\u015f\u0131k \u00e7\u00f6z\u00fcmler sunarken, modern CSS’in en g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131ndan biri olan Flexbox, hizalama sorunlar\u0131na zarif ve esnek bir \u00e7\u00f6z\u00fcm getirmi\u015ftir.<\/p>\n

Bu rehberde, Flexbox’\u0131n g\u00fcc\u00fcn\u00fc kullanarak \u00f6\u011feleri hem yatayda hem de dikeyde nas\u0131l kolayca ortalayabilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Flexbox’\u0131n temel prensiplerinden ba\u015flayarak, farkl\u0131 senaryolarda ortalama tekniklerini ve pratik ipu\u00e7lar\u0131n\u0131 ke\u015ffedece\u011fiz.<\/p>\n

Flexbox’a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri<\/h2>\n

Flexbox (Esnek Kutu Mod\u00fcl\u00fc), tek boyutlu bir yerle\u015fim sistemidir; yani bir anda ya sat\u0131r ya da s\u00fctun baz\u0131nda hizalama ve da\u011f\u0131t\u0131m yapar. Flexbox’\u0131 kullanmaya ba\u015flamak i\u00e7in, hizalamak istedi\u011finiz \u00f6\u011felerin ebeveynine (kapsay\u0131c\u0131s\u0131na) display: flex;<\/code> \u00f6zelli\u011fini ataman\u0131z yeterlidir. Bu, ebeveyni bir flex kapsay\u0131c\u0131s\u0131, \u00e7ocuklar\u0131n\u0131 ise flex \u00f6\u011feleri haline getirir.<\/p>\n

Flexbox’\u0131n iki ana ekseni vard\u0131r:<\/p>\n

    \n
  • Ana Eksen (Main Axis):<\/strong> Flex \u00f6\u011felerinin yerle\u015ftirildi\u011fi birincil eksendir. Varsay\u0131lan olarak yatayd\u0131r (soldan sa\u011fa), ancak flex-direction<\/code> \u00f6zelli\u011fi ile dikey (yukar\u0131dan a\u015fa\u011f\u0131ya) olarak de\u011fi\u015ftirilebilir.<\/li>\n
  • \u00c7apraz Eksen (Cross Axis):<\/strong> Ana eksene dik olan eksendir. Ana eksen yatay ise \u00e7apraz eksen dikeydir, ana eksen dikey ise \u00e7apraz eksen yatayd\u0131r.<\/li>\n<\/ul>\n

    Hizalama i\u00e7in kullanaca\u011f\u0131m\u0131z temel Flexbox \u00f6zellikleri, bu eksenler \u00fczerinde \u00f6\u011felerin nas\u0131l da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 ve hizalanaca\u011f\u0131n\u0131 kontrol eder:<\/p>\n

      \n
    • justify-content<\/code>: Ana eksen boyunca \u00f6\u011felerin hizalanmas\u0131n\u0131 ve bo\u015fluklar\u0131n da\u011f\u0131t\u0131m\u0131n\u0131 kontrol eder.<\/li>\n
    • align-items<\/code>: \u00c7apraz eksen boyunca \u00f6\u011felerin hizalanmas\u0131n\u0131 kontrol eder.<\/li>\n<\/ul>\n

      \u015eimdi bu \u00f6zellikleri kullanarak \u00f6\u011feleri nas\u0131l ortalayaca\u011f\u0131m\u0131za ge\u00e7elim.<\/p>\n

      Yatayda Hizalama: justify-content ile Ortalamak<\/h2>\n

      Bir veya daha fazla flex \u00f6\u011fesini kapsay\u0131c\u0131s\u0131n\u0131n ana ekseni boyunca yatayda ortalamak i\u00e7in justify-content<\/code> \u00f6zelli\u011fini kullan\u0131r\u0131z. Varsay\u0131lan flex-direction: row;<\/code> oldu\u011fu i\u00e7in, bu \u00f6zellik genellikle yatay hizalamay\u0131 sa\u011flar.<\/p>\n

      Kullan\u0131m: justify-content: center;<\/h3>\n

      justify-content: center;<\/code> de\u011feri, flex \u00f6\u011felerini ana eksen boyunca ortaya hizalar. \u00d6\u011feler aras\u0131ndaki ve kenarlardaki bo\u015fluklar e\u015fit \u015fekilde da\u011f\u0131t\u0131l\u0131r, b\u00f6ylece t\u00fcm \u00f6\u011fe grubu kapsay\u0131c\u0131n\u0131n ortas\u0131nda g\u00f6r\u00fcn\u00fcr.<\/p>\n

      \u00d6rnek Kod:<\/h4>\n
      \n    
      Yatayda Ortalanm\u0131\u015f \u00d6\u011fe<\/div>\n<\/div>\n<\/code><\/pre>\n
      .yatay-kapsayici {\n    display: flex;\n    justify-content: center; \/ \u00d6\u011feyi yatayda ortala <\/em>\/\n    border: 1px solid #ccc;\n    padding: 20px;\n    background-color: #f9f9f9;\n}\n\n.oge {\n    background-color: lightblue;\n    padding: 10px 20px;\n    color: #333;\n    font-family: sans-serif;\n}\n<\/code><\/pre>\n
      Bu \u00f6rnekte, .yatay-kapsayici<\/code> bir flex kapsay\u0131c\u0131s\u0131 haline gelir ve i\u00e7erisindeki .oge<\/code>, kapsay\u0131c\u0131n\u0131n geni\u015fli\u011fi boyunca yatayda ortalan\u0131r.<\/p>\n
      Pratik Bilgi:<\/strong> Birden fazla \u00f6\u011feniz varsa, justify-content: center;<\/code> t\u00fcm \u00f6\u011fe grubunu bir b\u00fct\u00fcn olarak ortalayacakt\u0131r. \u00d6\u011feler kendi aralar\u0131nda bo\u015fluk b\u0131rakmadan yan yana dizilecektir. E\u011fer \u00f6\u011feler aras\u0131nda bo\u015fluk b\u0131rakmak isterseniz gap<\/code> \u00f6zelli\u011fini veya \u00f6\u011felere margin<\/code> vermeyi d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n
      Dikeyde Hizalama: align-items ile Ortalamak<\/h2>\n
      Flex \u00f6\u011felerini kapsay\u0131c\u0131s\u0131n\u0131n \u00e7apraz ekseni boyunca dikeyde ortalamak i\u00e7in align-items<\/code> \u00f6zelli\u011fini kullan\u0131r\u0131z. Varsay\u0131lan flex-direction: row;<\/code> oldu\u011fu i\u00e7in, bu \u00f6zellik genellikle dikey hizalamay\u0131 sa\u011flar.<\/p>\n
      \u00d6nemli Not:<\/strong> align-items<\/code> \u00f6zelli\u011finin etkili olabilmesi i\u00e7in, flex kapsay\u0131c\u0131s\u0131n\u0131n dikeyde bir y\u00fcksekli\u011fe sahip olmas\u0131 gerekir. Aksi takdirde, kapsay\u0131c\u0131 i\u00e7eri\u011fi kadar k\u00fc\u00e7\u00fclecek ve dikeyde ortalanacak bir alan kalmayacakt\u0131r.<\/p>\n
      Kullan\u0131m: align-items: center;<\/h3>\n
      align-items: center;<\/code> de\u011feri, flex \u00f6\u011felerini \u00e7apraz eksen boyunca ortalar. Bu, genellikle \u00f6\u011feleri dikey olarak kapsay\u0131c\u0131n\u0131n ortas\u0131na yerle\u015ftirir.<\/p>\n
      \u00d6rnek Kod:<\/h4>\n
      \n    
      Dikeyde Ortalanm\u0131\u015f \u00d6\u011fe<\/div>\n<\/div>\n<\/code><\/pre>\n
      .dikey-kapsayici {\n    display: flex;\n    align-items: center; \/ \u00d6\u011feyi dikeyde ortala <\/em>\/\n    height: 200px; \/ Dikey hizalama i\u00e7in y\u00fckseklik tan\u0131mlamal\u0131y\u0131z! <\/em>\/\n    border: 1px solid #ccc;\n    padding: 20px;\n    background-color: #f9f9f9;\n}\n\n.oge {\n    background-color: lightgreen;\n    padding: 10px 20px;\n    color: #333;\n    font-family: sans-serif;\n}\n<\/code><\/pre>\n
      Bu \u00f6rnekte, .dikey-kapsayici<\/code> 200px y\u00fcksekli\u011fe sahip bir flex kapsay\u0131c\u0131s\u0131d\u0131r ve i\u00e7erisindeki .oge<\/code>, bu y\u00fcksekli\u011fin ortas\u0131na dikeyde hizalan\u0131r.<\/p>\n
      Pratik Bilgi:<\/strong> align-items<\/code>, t\u00fcm flex \u00f6\u011felerinin \u00e7apraz eksen boyunca hizalanmas\u0131n\u0131 etkiler. E\u011fer sadece belirli bir \u00f6\u011feyi dikeyde ortalamak isterseniz, o \u00f6\u011fe \u00fczerinde align-self: center;<\/code> kullanabilirsiniz. Bu, align-items<\/code> taraf\u0131ndan belirlenen genel hizalama kural\u0131n\u0131 ge\u00e7ersiz k\u0131lar.<\/p>\n
      Hem Yatay Hem Dikeyde M\u00fckemmel Hizalama<\/h2>\n
      Bir \u00f6\u011feyi veya \u00f6\u011fe grubunu hem yatayda hem de dikeyde kapsay\u0131c\u0131s\u0131n\u0131n tam ortas\u0131na getirmek, Flexbox’\u0131n en pop\u00fcler kullan\u0131m alanlar\u0131ndan biridir. Bunu ba\u015farmak i\u00e7in justify-content: center;<\/code> ve align-items: center;<\/code> \u00f6zelliklerini birlikte kullan\u0131r\u0131z.<\/p>\n
      Kullan\u0131m: justify-content: center; ve align-items: center;<\/h3>\n
      Bu kombinasyon, flex \u00f6\u011felerini ana eksen (yatay) ve \u00e7apraz eksen (dikey) boyunca ortalayarak, kapsay\u0131c\u0131n\u0131n tam merkezine yerle\u015ftirir.<\/p>\n
      \u00d6rnek Kod:<\/h4>\n
      \n    
      Tam Ortada!<\/div>\n<\/div>\n<\/code><\/pre>\n
      .tam-orta-kapsayici {\n    display: flex;\n    justify-content: center; \/ Yatayda ortala <\/em>\/\n    align-items: center;   \/ Dikeyde ortala <\/em>\/\n    height: 300px; \/ Tam ortalama i\u00e7in y\u00fckseklik \u015fart <\/em>\/\n    border: 2px dashed #f66;\n    background-color: #fff0f0;\n}\n\n.oge {\n    background-color: #ff6347; \/ Domates rengi <\/em>\/\n    color: white;\n    padding: 20px 40px;\n    font-size: 1.5em;\n    font-weight: bold;\n    border-radius: 8px;\n    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n<\/code><\/pre>\n
      Bu kod blo\u011fu, .oge<\/code> elementini .tam-orta-kapsayici<\/code> div’inin hem yatay hem de dikey eksenlerinde tam ortas\u0131na getirir. Bu teknik, modal pencereler, y\u00fckleme g\u00f6stergeleri veya bir sayfadaki belirli bir i\u00e7eri\u011fi vurgulamak i\u00e7in idealdir.<\/p>\n
      \u00d6zel Durumlar ve \u0130leri Seviye Hizalamalar<\/h2>\n
      Flexbox ile ortalama yaparken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 \u00f6zel durumlar ve daha geli\u015fmi\u015f teknikler de mevcuttur.<\/p>\n
      Tek Bir Flex \u00d6\u011fesini Ortalamak: margin: auto<\/h3>\n
      E\u011fer bir flex kapsay\u0131c\u0131s\u0131 i\u00e7inde sadece tek bir \u00f6\u011feyi (veya sadece bir \u00f6\u011feyi di\u011ferlerinden ba\u011f\u0131ms\u0131z olarak) ortalamak istiyorsan\u0131z, o flex \u00f6\u011fesine margin: auto;<\/code> vermek olduk\u00e7a g\u00fc\u00e7l\u00fc bir y\u00f6ntemdir.<\/p>\n
      Flexbox ba\u011flam\u0131nda, bir flex \u00f6\u011fesine uygulanan margin: auto;<\/code>, kullan\u0131labilir t\u00fcm ekstra alan\u0131 o y\u00f6nde t\u00fcketir. E\u011fer hem yatay hem de dikeyde margin: auto;<\/code> (yani sadece margin: auto;<\/code>) uygularsan\u0131z, \u00f6\u011fe kapsay\u0131c\u0131s\u0131n\u0131n i\u00e7inde hem yatay hem de dikey eksenlerde ortalan\u0131r. Bu, justify-content: center;<\/code> ve align-items: center;<\/code> kombinasyonuna benzer bir sonu\u00e7 verir, ancak yaln\u0131zca tek bir \u00f6\u011fe \u00fczerinde etkilidir ve di\u011fer \u00f6\u011felerden ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015f\u0131r.<\/p>\n
      \u00d6rnek Kod:<\/h4>\n
      \n    
      Bu tek \u00f6\u011fe ortalanacak<\/div>\n    
      Di\u011fer \u00f6\u011fe<\/div>\n    
      Bir ba\u015fka \u00f6\u011fe<\/div>\n<\/div>\n<\/code><\/pre>\n
      .tek-oge-kapsayici {\n    display: flex;\n    height: 250px;\n    border: 1px solid #ccc;\n    padding: 10px;\n    align-items: flex-start; \/ Di\u011fer \u00f6\u011feleri yukar\u0131da tutmak i\u00e7in <\/em>\/\n    background-color: #e6f7ff;\n}\n\n.tek-oge {\n    margin: auto; \/ Yatayda ve dikeyde otomatik bo\u015fluk olu\u015fturarak ortalar <\/em>\/\n    background-color: #66b3ff;\n    color: white;\n    padding: 15px 30px;\n    border-radius: 5px;\n    font-family: sans-serif;\n}\n\n.diger-oge {\n    background-color: #cccccc;\n    padding: 10px;\n    margin: 5px;\n    font-family: sans-serif;\n}\n<\/code><\/pre>\n
      Bu \u00f6rnekte, .tek-oge<\/code> di\u011fer \u00f6\u011felerden ba\u011f\u0131ms\u0131z olarak kapsay\u0131c\u0131n\u0131n tam ortas\u0131na yerle\u015firken, di\u011fer \u00f6\u011feler align-items: flex-start;<\/code> nedeniyle yukar\u0131da kal\u0131r.<\/p>\n
      flex-direction ile Ortalamay\u0131 De\u011fi\u015ftirmek<\/h3>\n
      flex-direction<\/code> \u00f6zelli\u011fini column<\/code> olarak ayarlad\u0131\u011f\u0131n\u0131zda, ana eksen dikey, \u00e7apraz eksen ise yatay hale gelir. Bu durumda:<\/p>\n
        \n
      • justify-content: center;<\/code> \u00f6\u011feleri dikeyde ortalar.<\/li>\n
      • align-items: center;<\/code> \u00f6\u011feleri yatayda ortalar.<\/li>\n<\/ul>\n
        Yani, flex-direction: column;<\/code> durumunda, tam ortalama i\u00e7in yine justify-content: center;<\/code> ve align-items: center;<\/code> kullan\u0131rs\u0131n\u0131z, ancak bu \u00f6zelliklerin hangi ekseni etkiledi\u011fi yer de\u011fi\u015ftirmi\u015f olur. Bu, dikey olarak d\u00fczenlenmi\u015f bir men\u00fc veya kart listesini ortalamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
        Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
        Flexbox, CSS’te hizalama ve yerle\u015fim sorunlar\u0131na getirdi\u011fi esneklik ve basitlik sayesinde modern web geli\u015ftiricilerinin vazge\u00e7ilmez ara\u00e7lar\u0131ndan biri haline gelmi\u015ftir. Art\u0131k \u00f6\u011feleri hem yatayda hem de dikeyde ortalamak, karma\u015f\u0131k hesaplamalar veya hileler yerine sadece birka\u00e7 CSS \u00f6zelli\u011fi ile m\u00fcmk\u00fcn hale gelmi\u015ftir. Bu rehberde \u00f6\u011frendi\u011finiz teknikler, responsive tasar\u0131mlar\u0131n\u0131zda ve her t\u00fcrl\u00fc kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirme senaryosunda size b\u00fcy\u00fck kolayl\u0131k sa\u011flayacakt\u0131r.<\/p>\n
        S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
        Flexbox eski taray\u0131c\u0131larda \u00e7al\u0131\u015f\u0131r m\u0131?<\/h4>\n
        Modern Flexbox (display: flex;<\/code>) \u00e7o\u011fu modern taray\u0131c\u0131da (Chrome, Firefox, Safari, Edge vb.) m\u00fckemmel \u015fekilde desteklenir. Internet Explorer 10 ve 11 gibi eski taray\u0131c\u0131lar i\u00e7in \u00f6nekli (-webkit-box<\/code>, -ms-flexbox<\/code>) Flexbox s\u00f6zdizimi gerekebilir, ancak g\u00fcn\u00fcm\u00fczde bu genellikle bir sorun te\u015fkil etmez. Projenizin hedef kitlesine g\u00f6re Can I use gibi kaynaklardan taray\u0131c\u0131 deste\u011fini kontrol etmeniz her zaman iyi bir pratiktir.<\/p>\n
        Neden margin: auto bazen justify-content\/align-items yerine tercih edilir?<\/h4>\n
        margin: auto;<\/code> \u00f6zellikle tek bir flex \u00f6\u011fesini di\u011ferlerinden ba\u011f\u0131ms\u0131z olarak ortalamak istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. E\u011fer bir flex kapsay\u0131c\u0131s\u0131nda birden fazla \u00f6\u011fe varsa ve sadece birini ortalamak, di\u011ferlerini ise farkl\u0131 bir \u015fekilde hizalamak isterseniz, margin: auto;<\/code> o tek \u00f6\u011fe i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. justify-content<\/code> ve align-items<\/code> ise t\u00fcm flex \u00f6\u011felerini bir grup olarak hizalar.<\/p>\n
        Flexbox ile metni nas\u0131l ortalar\u0131m?<\/h4>\n
        E\u011fer bir <\/p>\n
        <\/code> veya benzeri bir blok \u00f6\u011fesi i\u00e7inde metni ortalamak istiyorsan\u0131z, \u00f6ncelikle o blok \u00f6\u011fesini Flexbox ile yatayda veya dikeyde ortalayabilirsiniz. Daha sonra, blok \u00f6\u011fesinin i\u00e7indeki metni ortalamak i\u00e7in geleneksel text-align: center;<\/code> \u00f6zelli\u011fini kullanmaya devam edebilirsiniz. \u00d6rne\u011fin:<\/p>\n
        \n    
        Bu metin hem blok olarak ortalanacak hem de kendi i\u00e7inde ortalanacak.<\/p>\n<\/div>\n<\/code><\/pre>\n
        .flex-ortalanmis-kapsayici {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 150px;\n    border: 1px solid #ddd;\n}\n.metin-oge {\n    text-align: center; \/ Metni kendi i\u00e7inde ortala <\/em>\/\n    background-color: #ffe0b3;\n    padding: 10px;\n}\n<\/code><\/pre>\n
        Flexbox yerine Grid kullanmal\u0131 m\u0131y\u0131m?<\/h4>\n
        Flexbox tek boyutlu (ya sat\u0131r ya da s\u00fctun) d\u00fczenler i\u00e7in harikad\u0131r. CSS Grid ise iki boyutlu (hem sat\u0131r hem s\u00fctun) d\u00fczenler i\u00e7in tasarlanm\u0131\u015ft\u0131r. Genellikle ana sayfa d\u00fczeni (header, sidebar, main content, footer) gibi b\u00fcy\u00fck \u00e7apl\u0131, karma\u015f\u0131k ve \u00e7ok boyutlu d\u00fczenler i\u00e7in Grid tercih edilirken, bir navigasyon men\u00fcs\u00fc, kart listesi i\u00e7indeki \u00f6\u011feler veya bir formun i\u00e7indeki alanlar gibi tek boyutlu hizalamalar i\u00e7in Flexbox daha uygundur. \u0130kisini birlikte kullanmak da olduk\u00e7a yayg\u0131n ve g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r: Grid ile genel sayfa d\u00fczenini olu\u015fturup, her bir Grid h\u00fccresinin i\u00e7indeki i\u00e7eri\u011fi Flexbox ile hizalayabilirsiniz.<\/p>\n
        Flexbox ile responsive tasar\u0131mda nas\u0131l hizalama yapar\u0131m?<\/h4>\n
        Flexbox do\u011fas\u0131 gere\u011fi olduk\u00e7a responsive’dir. \u00d6\u011feler varsay\u0131lan olarak s\u0131\u011fmayacaklar\u0131 zaman ta\u015fabilirler. Bunu \u00f6nlemek veya farkl\u0131 d\u00fczenler olu\u015fturmak i\u00e7in flex-wrap: wrap;<\/code> \u00f6zelli\u011fini kullanabilirsiniz, bu sayede \u00f6\u011feler yeni bir sat\u0131ra ge\u00e7er. Ayr\u0131ca, medya sorgular\u0131 (media queries) ile flex-direction<\/code>, justify-content<\/code>, align-items<\/code> gibi Flexbox \u00f6zelliklerini ekran boyutuna g\u00f6re de\u011fi\u015ftirebilirsiniz. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda \u00f6\u011feleri dikey (flex-direction: column;<\/code>) ve b\u00fcy\u00fck ekranlarda yatay (flex-direction: row;<\/code>) hizalayabilirsiniz.<\/p>\n
        <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web tasar\u0131m\u0131nda \u00f6\u011feleri do\u011fru bir \u015fekilde hizalamak, kullan\u0131c\u0131 deneyimi ve g\u00f6rsel estetik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS’in ilk g","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37542","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nFlexbox'a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/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:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox'a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m\u0131nda \u00f6\u011feleri do\u011fru bir \u015fekilde hizalamak, kullan\u0131c\u0131 deneyimi ve g\u00f6rsel estetik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS'in ilk g\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-08T08:41:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Flexbox’a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri\",\"datePublished\":\"2026-01-08T08:41:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\"},\"wordCount\":1513,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\",\"name\":\"Flexbox'a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-08T08:41:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flexbox’a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flexbox'a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/","og_locale":"tr_TR","og_type":"article","og_title":"Flexbox'a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri","og_description":"Web tasar\u0131m\u0131nda \u00f6\u011feleri do\u011fru bir \u015fekilde hizalamak, kullan\u0131c\u0131 deneyimi ve g\u00f6rsel estetik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS'in ilk g","og_url":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-08T08:41:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Flexbox’a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri","datePublished":"2026-01-08T08:41:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/"},"wordCount":1513,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/","url":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/","name":"Flexbox'a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-08T08:41:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/flexboxa-kisa-bir-bakis-hizalama-sanatinin-temelleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Flexbox’a K\u0131sa Bir Bak\u0131\u015f: Hizalama Sanat\u0131n\u0131n Temelleri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37542"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37542\/revisions"}],"predecessor-version":[{"id":37543,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37542\/revisions\/37543"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}