2 puan yazan GN⁺ 2025-01-06 | 1 yorum | WhatsApp'ta paylaş
  • 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

1 yorum

 
GN⁺ 2025-01-06
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