CSS’te div’i ortalamanın yolları

 (joshwcomeau.com)
5 puan yazan GN⁺ 2024-02-14 | 3 yorum | WhatsApp'ta paylaş
  • CSS’te ortalama artık tek bir hile değil; öğenin belge akışı içinde mi, yüzen konumda mı, tek mi yoksa birden çok mu olduğuna göre Flow, Flexbox, Positioned layout, CSS Grid, text-align arasından seçim yapma meselesidir
  • Tek bir öğeyi yatayda ortalamak için genişliği max-width: fit-content ile sınırlayıp margin-inline: auto uygulayan Flow layout yöntemi, kardeş öğeleri daha az etkiler
  • Flexbox, yalnızca justify-content: center ve align-items: center ile tek veya birden çok çocuğu yatay/dikey olarak ortalayabilir; çocuk taşsa bile simetrik olarak overflow olur
  • Modal ve banner gibi yüzen UI’lar için position: fixed, inset: 0, boyut sınırlaması ve margin: auto kombinasyonu uygundur; CSS Grid ise kısa söz dizimi ve üst üste bindirme konusunda güçlüdür
  • Metnin kendisi için layout hizalaması değil text-align: center gerekir; Flow layout’ta align-content desteği yaygınlaştığında, basit dikey hizalama için Flexbox veya Grid’e geçme ihtiyacı azalabilir

Flow layout’ta auto margin ile yatay ortalama

  • Eski stratejilerden biri, öğenin genişliğini sınırlayıp iki yandaki margin’leri auto yapmaktır
.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
  • Flow layout’taki öğeler varsayılan olarak yatay alanı doldurduğundan, ortalamak için önce genişlik sınırlaması gerekir
  • fit-content, öğenin içeriği sarmasını sağlar; böylece width, height gibi içerik boyutuna göre belirlenir
  • width yerine max-width kullanmak yalnızca maksimum boyutu sınırlar; bu sayede container daraldığında öğe de birlikte küçülebilir
  • Yalnızca margin-left: auto varsa kalan alan sol margin’e gider; iki yandaki margin’lerin ikisi de auto olduğunda kalan alan eşit bölünür ve öğe ortaya yerleşir
.element {
  max-width: fit-content;
  margin-inline: auto;
}
  • margin-inline, margin-left ve margin-right değerlerini aynı anda ayarlamanın modern yoludur ve tarayıcı desteği iyidir
  • margin-inline, mantıksal özelliklerin (logical properties) bir parçası olduğundan sol/sağ yerine yazı yönünün inline eksenine göre çalışır
    • Hem soldan sağa hem de sağdan sola yazılan dillerde margin’i doğru tarafa uygulayabilir
  • Bu yöntem, blog yazısındaki görsel gibi yalnızca tek bir çocuğu ortalamak ve kardeş öğeleri etkilemek istemediğiniz durumlarda kullanışlıdır

Flexbox ile tek veya birden çok çocuğu ortalama

  • Flexbox, ana eksen boyunca birden çok öğeyi yerleştirmede güçlü bir layout modudur ve ortalama için de sık kullanılır
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • justify-content: center ve align-items: center birlikte kullanıldığında çocuklar yatay ve dikey olarak ortalanabilir
  • Çocuk container’a sığmasa bile hizalama korunur; taşma durumunda da simetrik olarak overflow olur
  • Birden çok çocuk da ortalanabilir; flex-direction ile yığılma yönü kontrol edilir
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
  • Tek veya birden çok çocuk için geniş ölçekte uygulanabilen varsayılan seçenek olarak kullanmaya uygundur

Positioned layout ile yüzen UI’ları ortalama

  • Modal, istem, banner gibi normal belge akışından çıkıp üstte yüzmesi gereken öğeler Positioned layout ile ele alınabilir
.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}
  • position: fixed, öğeyi viewport’a sabitler; inset: 0px ise top, left, right, bottom değerlerinin tümünü 0px yapar
  • Yalnızca inset: 0px varsa öğe viewport’un tamamını doldurmaya çalışır; bu yüzden boyut width, height, max-width, max-height ile sınırlandırılmalıdır
  • Bu kombinasyon kasıtlı olarak imkânsız koşullar oluşturur
    • Öğe hem soldan hem sağdan 0px uzakta olup aynı anda 12rem genişliğe sahip olamaz
    • CSS render motoru width kısıtını önceliklendirir ve dil yönüne göre bir tarafa yaslayarak gerilimi çözer
  • Buna margin: auto eklendiğinde tarayıcının çözüm biçimi değişir ve öğe yatay/dikey olarak ortaya yerleşir
  • Gerekli dört koşul position: fixed, inset: 0px, sınırlı genişlik ve yükseklik, margin: auto şeklindedir

  • Alt banner gibi yalnızca tek yönde ortalama

    .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
    • top: 0px atlandığında dikey yöndeki imkânsız koşul ortadan kalkar ve öğe alta sabitlenir
    • calc(100vw - 8px * 2), viewport’un iki yanında tampon bırakacak şekilde maksimum genişliği sınırlar
    • margin-inline: auto, yatay ortalama niyetini daha doğru ifade eder

  • Boyutu bilinmeyen öğe

    .element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
    • Öğe boyutu önceden bilinmiyorsa width: fit-content ve height: fit-content ile içeriği sarması sağlanabilir
    • max-width: 60vw gibi sınırlamalar eklenebilir, ancak zorunlu değildir; öğe viewport içinde kalır

  • Bilerek biraz kaydırılmış merkez

    • bottom: 48px gibi tek bir inset değerini ayarlarsanız öğe, belirtilen değerin yarısı kadar hareket eder
    • bottom: 48px olduğunda öğe 24px yukarı çıkar
    • Bunun nedeni öğenin üst ve alt sınırlar arasındaki sanal kutu içinde ortada asılı durmasıdır
    • transform: translateY(-48px) kullanırsanız öğeyi tam olarak 48px yukarı taşıyabilirsiniz
    • bottom offset yöntemi, transform özelliğini daha sonra animasyon veya giriş efekti için saklamanıza olanak tanır

CSS Grid ile kısa yoldan ortalama ve üst üste bindirme

  • CSS Grid’de en kısa ortalama kodu display: grid ve place-content: center kombinasyonudur
.container {
  display: grid;
  place-content: center;
}

  • place-content, justify-content ve align-content için kısayoldur; satır ve sütunlara aynı değeri uygular

  • Bu ayarla üst container’ın ortasında 1×1 Grid hücresi oluşur

  • Flexbox ile farkı

    • Flexbox’a benzer görünse de CSS Grid tamamen farklı bir layout algoritması kullanır
    • Çocuğa width: 50% ve height: 50% verdiğinizde fark ortaya çıkar
    • Flexbox’ta yüzdeler üst .container temel alınarak hesaplanır
    • CSS Grid’de yüzdeler Grid hücresi temel alınarak hesaplanır
    • grid-template-columns veya grid-template-rows belirtilmezse Grid track’leri boyutlarını içeriğe göre hesaplar; bu nedenle öğe beklenenden küçük olabilir
    • Bu durumda Grid’i düzeltmek için daha fazla CSS eklenebilir, ancak basit ortalama için Flexbox daha kolay olabilir

  • Birden çok öğeyi aynı konumda üst üste bindirme

    .container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • CSS Grid, birden çok çocuğu aynı hücreye yerleştirebilir
    • Tüm .element öğelerine grid-row: 1 ve grid-column: 1 verildiğinde öğeler aynı Grid alanını paylaşır ve önden arkaya üst üste biner
    • Çocuk boyutları birbirinden farklı olsa da çalışabilir
    .container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • Farklı boyutlardaki çocukları ortada üst üste bindirmek için ayrıca place-items: center gerekir
    • place-items, justify-items ve align-items için kısayoldur; Grid hücresi içindeki görsellerin hizalamasını kontrol eder
    • Bu özellik yoksa Grid hücresinin kendisi ortada olsa bile hücre içindeki görseller sol üste yığılır
    • CSS Grid’i daha derinlemesine incelemek için An Interactive Guide to CSS Grid kaynağına bakabilirsiniz

Metin ayrıca text-align ile hizalanır

  • Metin CSS’te ayrı ele alınmalıdır; Flexbox gibi layout teknikleri tek tek harfleri hizalamaz
  • Flexbox ile bir paragrafı ortalarsanız paragraf bloğu ortaya gelir, ancak paragrafın içindeki yazılar sola hizalı kalır
  • Metnin kendisini ortalamak için text-align: center kullanılmalıdır
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Flow layout’un geleceği: align-content

  • Flow layout’ta yatay ortalama auto margin ile mümkündür, ancak dikey ortalama için şimdiye kadar Flexbox veya Grid gibi başka layout modları gerekiyordu
  • 2024 başı itibarıyla tarayıcı üreticileri Flow layout’ta align-content uygulaması üzerinde çalışıyor
  • Bu yeni davranış, içeriğin block yönündeki hizalamasını kontrol eder; o dönemde yalnızca Chrome Canary’de bir flag arkasındaki özellik olarak ve Safari Technical Preview’da kullanılabiliyordu
  • Örnek demo, gerçek Flow layout davranışı değil; Chrome Canary ve Safari TP’nin davranışı kontrol edildikten sonra Flexbox ile yeniden oluşturulmuş bir demodur
  • Bu özellik yeni UI’lar oluşturmaz, ancak basit ortalama için ayrı bir layout moduna geçme ihtiyacını azaltabilir

Duruma göre seçim ölçütleri

  • Tek bir öğeyi kardeşleri etkilemeden yatayda ortalamak için Flow layout auto margin stratejisini kullanın
  • Modal veya banner gibi yüzen UI’ları Positioned layout ve auto margin ile ortaya yerleştirin
  • Birden çok öğeyi aynı konumda üst üste ortalayarak yığmak istiyorsanız CSS Grid uygundur
  • Metni ortalamak için text-align kullanın; diğer ortalama yöntemleriyle birlikte kullanılabilir
  • Geri kalan çoğu durumda Flexbox en genel amaçlı seçenektir
    • Tek veya birden çok çocuğu ele alabilir
    • Hem yatay hem dikey ortalama mümkündür
    • Çocuk container içinde kalsa da taşsa da kullanılabilir

İlgili okumalar

3 yorum

 
v08zbv8fvlkjasdflkj 2024-02-15

Düşününce, GeekNews’te de makalelerin ortalanmamış olması bir anda gözüme batmaya başladı hüzün, haha
 
joyfui 2024-02-14

place-items: center; kullanıyorum ama bunun dışında da epey yöntem varmış.
 
GN⁺ 2024-02-14
Hacker News yorumları

  • Diğer yorumlar yorumun kendisini yorumladığına göre ben de araya gireyim: CSS ile ortalama memi bence çoğunlukla “bir öğeyi başka bir öğenin tam ortasına koymanın yolu” anlamına geliyor
    Uygulama açısından ortalamanın zor olduğu ve birden fazla anlama gelebileceği doğru; ama GeoCities ya da AngelFire kuşağı için bunu kabullenmek zordu, çünkü HTML ile 90’larda bile 600x600 sarı bir kutunun tam ortasına hello yazısını sorunsuzca koyabiliyordunuz
    Daha iyi diye verilen yeni aracın zaten yapılabilen standart bir işi yapamaması sinir bozucuydu; bu yüzden 2000’lerin sonlarına kadar tablo yerleşimi kullanmaya devam ettik. CSS’i seviyorum, ama bu bir tür Stockholm sendromu da olabilir
    valign’ın Chromium’da bulunmasa bile çalışmasına şaşırdım; bunun yeni bir değişiklik olup olmadığını bilmiyorum

    • Tam söylediğin şey, yani 600x600 sarı bir kutunun tam ortasına hello koymak, CSS’in ilk sürümünden beri mümkündü. Örneğin HTML’deki valign niteliği; inline, inline-block, table-cell kutularındaki vertical-align CSS özelliğine karşılık gelir
      Ne var ki deneyimime göre, romantik biçimde sadece tablo kullanalım diyen ya da CSS’in sınırlı ve kafa karıştırıcı olduğundan şikâyet eden birçok kişi, CSS’in gerçekte nasıl çalıştığını öğrenmek için pek çaba göstermedi. Yazar en azından bunun farkında
    • Firefox’ta da "valign" niteliği olmadan çalışıyor. Ancak sabit yerleşim olmadan tablo kullanırken üç büyük tarayıcı arasında hep küçük farklar gördüğüm için, genel olarak otomatik yerleşim davranışına güvenmezdim

  • Güzel bir yazı ve sözde teknik okur kitlesi için buradaki tepkiler oldukça şaşırtıcı. Otomatik sayfa yerleşimi ve biçimlendirme gerçekten zor; hatta fiilen doktora tezi konusu olacak kadar[1]
    Bu karmaşıklığın “benim istediğim gibi yap” türünden basit bir ifadeye soyutlanmasını beklemek gerçekçi değil
    Gwern Branwen’in web sitesine[2] bakarsanız neredeyse sanat düzeyinde; ama asıl nokta, önce istediğiniz görünümü belirleyip yazıyı o stil içinde ifade edilebilir olacak şekilde kısıtlamak
    1995’te “web’in ilk golf dergisi” girişimine[3] katıldığımdan beri web sayfası yerleşimiyle uğraşıyorum; Zen Garden ve A List Apart e-posta listesi/web sitesi[4] sayesinde, farklı çıktı ortamlarında iyi görünen web içeriği üretmenin ne kadar zor olduğunu anladım
    Anlamsal içeriği ekrana, kâğıda, sonlu bir düzleme taşımak; kaynak uzaydan hedef uzayın kural kümesine giden bir eşleme veya projeksiyondur. Bu kuralların içinde fiziksel kısıtlar, tarayıcı yazılımı kısıtları ve her tarayıcının kendine özgü davranışları bulunur
    Bu yüzden CSS, “sıfırdan web sayfası yapacağım” diyen birine karmakarışık görünebilir; ama aslında yapılabilecekleri engelleyen kısıtlardan çok, seçeneklerin fazla olması durumuna daha yakındır
    [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
    [2] https://gwern.net/
    [3] Adı Golfweb’di ve sonunda CBS Sports’un bir parçası olmuş gibi görünüyor
    [4] https://www.alistapart.com

    • Web yerleşimi deneyimim 1998’den başladığı için yaklaşık 3 yıl geriden geliyorum; ama ilgili tüm deneyimlerim içinde Every Layout kaynağı[1] kadar iyisini hâlâ görmedim. Şiddetle tavsiye ederim
      [1] https://every-layout.dev/rudiments/boxes/
    • CSS’in sorunu neredeyse tamamen kendi yarattığı karmaşıklık. Yerleşimin zor olduğu doğru, ama neden bugünkü modele benzer bir şeyi hedefleyip daha da zorlaştırdıklarını merak ediyorum
      Özellikle tüm sayfalara uyacak tek büyük bir model hedefi ve her sayfada otomatik yerleşimi yeniden hesaplama gibi Sisifosvari bir amaç var. Buna bir de tüm pencere boyutlarını hedefleme amacı eklenince, bunun neden mümkün olduğunu düşündüklerini anlayamıyorum
    • CSS sanatı daha fazla görülsün diye bu bağlantıyı eklemeden duramadım
      https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
      İçinde kaç tane ortalanmış div var bilmiyorum
    • Son birkaç gündür akış tabanlı yerleşim ve sayfa bölmeyi Flexbox tabanlı bir yerleşim sistemine zorla yerleştirmeye çalıştım; yerleşim ve biçimlendirmenin gerçekten zor olduğunu gördüm
      Özellikle her sütunda farklı boyutlarda metin ve nesneler bulunan tablolarda, öğelerin ne zaman ve nasıl sonraki sayfaya taşınacağına karar vermek iyi sezgisel yöntemler seçmeyi gerektiren çetin bir iş
    • Bunun kişinin kendi dayattığı bir sorun mu, yoksa doğası gereği zor bir araştırma problemi mi olduğunu nasıl ayırt edebiliriz bilmiyorum. Web geliştirmeye girmeden önce “yerleşim zordur” diye hiç düşünmemiştim; o zamanlar da kaydırılabilir ve yeniden boyutlandırılabilir pencereler vardı
      custom appkit, GTK kontrolleri ve yayımlanmamış Lua tabanlı araç takımlarında içeriği ortalamak ya da öğeleri satır kırdırıp hizalamak önemli bir mesele değildi; web’de neyi kaçırdığımızı merak ediyorum
      “Sadece seçenekler bol” sözü, çoktan gömülmüş TMTOWTDI’ye de benziyor

  • Harika bir yazı; etkileşimli öğeler özellikle iyi. Birkaç yıl önce CSS konumlandırmasını ve ortalamayı anlamamda en çok yardımcı olan şey kutu modelini okumaktı
    Kutu modelini anlamak, DOM içindeki akışı değerlendirmeye yardımcı oluyor; display ve position CSS özellikleri de konumlandırmayı öğrenmenin temeli. MDN belgeleri iyi hazırlanmış
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

  • “Ortalamak nasıl yapılır?” CSS’in klasik sorularındandır; bunun gözle görülür derecede bariz olmaması bile başlı başına çok şey anlatıyor. CSS, bulanık bir karmakarışık yığına daha yakın; tek bir komitenin değil, aynı anda birden çok komitenin tasarladığı evye tipi bir koleksiyon
    Gerçek sürüm yayımlama kavramından uzun zaman önce vazgeçildi; CSS’in bugünkü durumu, sürekli değişen tekil modüllerin durumlarının bir araya getirilmiş hâline daha yakın. Yazılım geliştirme böyle yapılmaz; doğrusu bir şey üretmek için de iyi bir yöntem değil

    • Hem katılıyorum hem katılmıyorum. Büyük insan toplulukları zaten böyle yavaş ve dağınık hareket eder; kedi gütmeye benzer
      Web’in ve teknolojilerinin kolektif olarak nereye gittiği de net olmadığı için başarısız deneylerin ve tutarsızlıkların çok olması kaçınılmaz. Net hedefi ve rotası olan iyi planlanmış bir mühendislik projesinden çok daha geniş bir alan
    • Ortalamayla ilgili sorunun sık gelmesinin nedeni, öğrenen biri için en doğal ilk sorulardan biri olması bence
      Bir web sayfasını istediği görünüme sokmaya çalışan kişinin ilk öğrendiği şeyler genelde yazı boyutu, renk, arka plan rengi ve hizalamadır; hizalamayı çıkarırsanız diğerleri CSS öncesi yöntemlerle neredeyse bire bir örtüşür
      CSS’ten önce içeriği ortaya koymak istiyorsanız onu sadece bir etikete koymanız yeterliydi; metin mi, div, tablo, düğme gibi bir HTML nesnesi mi olduğu fark etmezdi. Birçok kişi CSS’in de eskisi gibi inline ve blok nesne ayrımı yapmadan çalışmasını bekledi; CSS bu önyargıyla uyuşmayınca da bu soru ortaya çıktı

  • Bu yazıyı gerçekten beğendim; özellikle etkileşim biçimi harika. Uzun zamandır neredeyse her zaman istediğim sonucu veren bir araç da var
    http://howtocenterincss.com

  • CSS’in, içeriği ortalayan bir tablo kadar işe yarar bir çözüm sunması onlarca yıl sürdü; bu arada yerleşim için tablo kullanmak kınanıyordu

  • Buradaki pek çok kişi gibi CSS’in tam bir felaket olduğunu düşünüyorum. Temel sorun, stil yönergelerinin durmadan birbirinin üzerine yazması ya da hiçbir etkisi olmadan sessizce başarısız olması

  • Örneklerden birindeki çerez bildiriminin acımasız derecede dürüst olması hoşuma gitti
    “Kişisel verilerinize değer veriyoruz. Gezinme deneyiminizi iyileştirmek için bu verileri reklamverenlere satan çerezler kullanıyoruz. Bu çok değerlidir”

  • Yerleşimde tablo kullanma tarihinden çıkarılacak dersler ilginç. Tablolarda kenarlık, padding ve sütunlara dizilmiş hücre tabanlı bir yerleşim vardır; bunu genişletirsek tabloların ve hücrelerin çevresinde boşluk, yani margin de gerekir
    Tablolar yerleşimde uzun süredir yerleşik öğelerdir ve aslında tüm öğelerin bir ölçüde tablo hücresi gibi davranması gerektiği bilgeliğini içinde barındırıyordu
    Öğeler kutu modeline uymalıdır; tipografiyle uğraşan biri için bu oldukça doğaldır, ama aynı zamanda sütunlar hâlinde dizilmeleri gerektiği daha az barizdir ve Grid layout ile Bootstrap’in temelini oluşturur
    Bir yerleşim sorunuyla karşılaşıp bunu tabloyla çözdükten sonra, tablonun bazı özelliklerine sahip ama hepsine sahip olmayan yeni bir işleve ihtiyaç olduğunu fark etmek doğal bir evrimdir
    CSS bunu keşfetti; fakat garip biçimde kelime işlemciler gibi bazı sistemler öğeleri kutu modeli altında birleştiremedi

  • “Bu hâlâ neden bu kadar zor?” türü şikâyetlerin epey hedefi ıskaladığını hissediyorum. Yazıda söylendiği gibi Flexbox, basit tüm ortalama durumlarını sezgisel biçimde çözüyor
    Flexbox ile çözülmüyorsa, bu yalnızca ortalamak değil, daha karmaşık bir şey yapıyordur; uygulamanın çok basit olmasını beklemek de yerinde değil

    • Uzun süredir bu işi yapan biri olarak, Flexbox’tan önce zordu; Flexbox’ın %100 desteklenmediği dönemde de tarayıcı kullanım oranlarını sürekli takip edip kullanılıp kullanılamayacağına karar vermek gerektiği için zordu
      Artık yöntem sayısı o kadar fazla ki karmaşıklık bunaltıcı. Yeni bir şey yapmaktan çok eski kodu düzeltme durumu daha sık yaşanıyor; CSS’in neden belirli bir şekilde yazıldığını, hangi uç durumların bozulacağını, düzeltmenin uygun olup olmadığını ve basit olmadığında birçok çözüm arasından hangisinin seçileceğini tartmak gerekiyor
      Yazıya göz gezdirince bile sezgisel gelmiyor. Flexbox’ta bile yatay ayar justify-content, dikey ayar align-items; CSS özellik adları o kadar çok ve keyfî ki artık iyi hatırlanmıyor
      Sonuçta fark, karmaşık çözümleri basit, sezgisel ve güvenilir yapı taşlarıyla mı kurduğunuz; yoksa kısmen birbiriyle örtüşen ve sürekli aratılması gereken karmaşık yapı taşlarıyla mı kurduğunuzdur
      Go veya Python birincisine daha yakın, CSS ise ikincisine daha yakın
    • Flexbox, CSS’in her zaman olmasını istediğim hâli; uzun süre öyle değildi, sonra bir gün öyle oldu ve Flexbox’sız tarayıcı desteğini bırakabilir hâle geldik. Neredeyse CSS’in nihai formu gibi hissettiriyor
      İnsanların Bootstrap’in grid sistemini sevmesinin bir nedeni vardı; Flexbox bunların hepsini ve daha fazlasını doğrudan tarayıcının içinde yapıyor. Onu ne kadar sevdiğimi abartmak neredeyse zor
    • Bir zamanlar belirli durumlarda makul ölçüde zordu, ama son yaklaşık 10 yıldır zaten çözülmüş bir problem. Hâlâ CSS’te div ortalamanın simya ile roket bilimi arasında bir şeymiş gibi konuşanlar var
      Web geliştirmenin diğer kısımları kadar CSS’teki değişimleri takip etmeden böyle kesin yargılarda bulunmanın ne kadar rahat yapıldığını gösteriyor
    • Üstelik Flexbox 10 yılı aşkın süredir yaygın biçimde destekleniyor. Buradaki yorum akışı epey ilgi çekici
    • Kesinlikle doğru. Flexbox ile boğuşurken bir adım geri çekilip adım adım çözmek yardımcı oluyor
      Dıştan içe, ebeveyn öğeden çocuk öğeye doğru ilerleyince çok daha kolaylaşıyor. Biraz beceri gerektiriyor ama temelde elastik cebire daha yakın