{"id":23762,"date":"2025-06-11T20:45:18","date_gmt":"2025-06-11T17:45:18","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-id-mi-class-mi-flexbox-ozellikleri-ve-daha-fazlasi\/"},"modified":"2025-06-11T20:45:18","modified_gmt":"2025-06-11T17:45:18","slug":"css-id-mi-class-mi-flexbox-ozellikleri-ve-daha-fazlasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-id-mi-class-mi-flexbox-ozellikleri-ve-daha-fazlasi\/","title":{"rendered":"CSS: ID mi Class m\u0131? Flexbox \u00d6zellikleri ve Daha Fazlas\u0131"},"content":{"rendered":"

<\/p>\n

CSS: ID mi Class m\u0131? Flexbox \u00d6zellikleri ve Daha Fazlas\u0131<\/p>\n

Merhaba! Fatih Soysal olarak, bug\u00fcn CSS’in temel, ancak s\u0131kl\u0131kla kar\u0131\u015ft\u0131r\u0131lan baz\u0131 konular\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6zellikle, ID’ler ve Class’lar aras\u0131ndaki fark, Flexbox’\u0131n g\u00fc\u00e7l\u00fc \u00f6zellikleri ve justify-content ile text-align aras\u0131ndaki ince ayr\u0131mlar\u0131 inceleyece\u011fiz. Bu bilgiler, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 olacakt\u0131r.<\/p>\n

ID ve Class Aras\u0131ndaki Fark Nedir?<\/h2>\n

\u00d6ncelikle, ID’ler ve Class’lar, HTML \u00f6\u011felerine stil uygulamam\u0131z\u0131 sa\u011flayan CSS se\u00e7icileridir. Ancak, aralar\u0131nda \u00f6nemli bir fark vard\u0131r: Bir sayfada her ID yaln\u0131zca bir kez kullan\u0131labilirken, bir Class birden fazla \u00f6\u011feye uygulanabilir.<\/strong> Bu nedenle, ID’ler genellikle sayfan\u0131n benzersiz \u00f6\u011felerini hedeflemek i\u00e7in kullan\u0131l\u0131r, Class’lar ise birden fazla \u00f6\u011feyi ayn\u0131 stil ile bi\u00e7imlendirmek i\u00e7in tercih edilir. \u00d6rne\u011fin, sayfan\u0131zdaki bir ana ba\u015fl\u0131k i\u00e7in ID kullanabilir, ancak t\u00fcm paragraflar i\u00e7in ayn\u0131 stili uygulamak i\u00e7in bir Class kullanabilirsiniz.<\/p>\n

K\u0131saca; ID’ler \u00f6zg\u00fcnl\u00fck, Class’lar ise tekrar kullan\u0131labilirlik sa\u011flar. Bu ayr\u0131m, CSS kodunuzun d\u00fczenli ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<\/p>\n

Flexbox: Ana Eksen ve Yan Eksen<\/h2>\n

Flexbox, birden fazla \u00f6\u011fenin d\u00fczenini kolayca y\u00f6netmemizi sa\u011flayan g\u00fc\u00e7l\u00fc bir CSS \u00f6zelli\u011fidir. Flexbox kullanarak \u00f6\u011felerinizi yatay veya dikey olarak s\u0131ralayabilir, aralar\u0131ndaki bo\u015fluklar\u0131 ayarlayabilir ve daha bir\u00e7ok d\u00fczenleme yapabilirsiniz. Ancak, Flexbox’\u0131 anlamak i\u00e7in “ana eksen” ve “yan eksen” kavramlar\u0131n\u0131 \u00f6\u011frenmek \u00f6nemlidir.<\/p>\n

Ana eksen (main axis)<\/strong>, \u00f6\u011felerin s\u0131raland\u0131\u011f\u0131 y\u00f6nd\u00fcr. flex-direction \u00f6zelli\u011fi ile ana eksenin y\u00f6n\u00fcn\u00fc (sat\u0131r veya s\u00fctun) belirleyebilirsiniz. \u00d6rne\u011fin, flex-direction: row; ana eksenin yatay, flex-direction: column; ise dikey olmas\u0131n\u0131 sa\u011flar. Yan eksen (cross axis)<\/strong> ise ana eksene dik olan y\u00f6nd\u00fcr. \u00d6\u011felerin ana eksene g\u00f6re hizalanmas\u0131n\u0131 align-items ve justify-content gibi \u00f6zellikler ile kontrol ederiz.<\/p>\n

Daha detayl\u0131 bilgi i\u00e7in fatihsoysal.com<\/a> adresindeki di\u011fer makalelerimi inceleyebilirsiniz. <\/p>\n

\u00d6nemli Flexbox \u00d6zellikleri<\/h2>\n

Flexbox’\u0131n bir\u00e7ok yararl\u0131 \u00f6zelli\u011fi vard\u0131r, ancak en yayg\u0131n kullan\u0131lanlar\u0131ndan baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n