HN'de Paylaşıldı: CSS Flexbox Zorluklarını Çözmek için Playground

• Farklı flex özelliklerini deneyerek düzenin düzen üzerindeki etkisini anlayabileceğiniz bir araç

• Değişiklikleri anlık olarak görebilir ve üretilen CSS kodunu kopyalayabilirsiniz

• flex-direction

  • row: Öğeleri yatay düzende sıralar
  • column: Öğeleri dikey düzende sıralar
  • row-reverse: Öğeleri yatay düzende ters sırayla yerleştirir
  • column-reverse: Öğeleri dikey düzende ters sırayla yerleştirir

• justify-content

  • flex-start: Öğeleri başlangıç noktasına hizalar
  • center: Öğeleri merkezde hizalar
  • flex-end: Öğeleri bitiş noktasına hizalar
  • space-between: Öğeler arasında eşit boşluk bırakır
  • space-around: Öğelerin etrafına eşit boşluk bırakır

• align-items

  • stretch: Öğeleri gererek hizalar
  • flex-start: Öğeleri başlangıç noktasına hizalar
  • center: Öğeleri merkezde hizalar
  • flex-end: Öğeleri bitiş noktasına hizalar
  • baseline: Öğeleri taban çizgisine hizalar

• flex-wrap

  • nowrap: Öğeleri tek satıra yerleştirir
  • wrap: Öğeleri birden fazla satıra yerleştirir
  • wrap-reverse: Öğeleri ters sırayla birden fazla satıra yerleştirir

• Örnek kod

  • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

• Yapımcı

  • Yoav Sabag tarafından yapılmıştır
  • YouTube ve GitHub'de daha fazla bilgiyi kontrol edebilirsiniz

[GN⁺]

Hacker News yorumu

• Flexbox basit ve anlaşılması kolay olsa da özellikleri ve değerleri sezgisel değil

  • justify-content ve align-items gibi adlar kafa karıştırıcı oluyor
  • Flexbox'i öğrenmek için birden fazla deneme yapmak gerekiyor

• Flexboxfroggy.com ile cssgridgarden.com'u önerdi

  • Bu siteler Flexbox ve CSS Grid öğrenmek için faydalı

• Josh'un kılavuzunu önerdi

  • Flexbox'in ileri düzey ipuçları ve püf noktalarını detaylı şekilde anlatıyor
  • flex-basis, auto margins, min-width gibi kavramları ele alıyor

• Benzer bir etkileşimli kılavuz oluşturma deneyimini paylaştı

  • Anıları tazelemeye yardımcı oluyor

• justify-content ve align-items yerine main-axis-arrangement ve cross-axis-alignment daha anlaşılır adlardi

• Flexbox'i doğru kullanmanın zor olduğunu söyledi

  • Flexboxfroggy.com'un da yardımcı olmadığını belirtti

• CSS düzenlerini çalıştırabileceğiniz ilginç zorluklar gerektiğini belirtti

  • ChatGPT, CSS hata ayıklamada yardımcı olur ama CSS'in derinlemesine anlaşılması gerekir

• Flexbox ve Grid'in sözdiziminin açıklayıcı olduğunu düşünüyor

  • Kutu modelini anlayarak ve Firefox Dev Tools kullanarak faydalanılabilir
  • Flexboxfroggy ve cssgridgarden pratikte kullanmak için faydalı
  • CSS-tricks cheat sheet'i sıkça inceliyor

• Flexbox'in çocuk öğelerinin de önemli özellikleri olduğunu vurguladı

  • Sadece dört adet konteyner özelliğiyle sınırlı kalmak kısıtlayıcı

• Flexbox özelliklerini referans alabileceğiniz bir cheat sheet hazırladım

  • Bu da başkalarına yardımcı olabilir