CSS düzeni: Flexbox ve Grid derinlemesine
Flexbox ve Grid’in hizalama, boyutlandırma ve yerleştirme kurallarını tek tek dener, gerçek sayfa düzenlerini sağlam biçimde kurarsın.
Seviye 201 · 19 ders · 18 pratik lab
Dersler
Flexbox
- Ana eksen ve çapraz eksen
- flex-grow, flex-shrink ve flex-basis
- Hizalama: justify-content ve align-items
- Satır kaydırma ve gap
- Flexbox kalıpları: medya nesnesi ve dipte duran alt bilgi
- Kısa görev: daralınca alt satıra geçen araç çubuğu
Grid
- İzler, fr birimi ve repeat
- Çizgilere göre yerleştirmek
- Adlandırılmış alanlar: grid-template-areas
- auto-fit, auto-fill ve minmax ile kendiliğinden duyarlı ızgara
- Örtük ızgara ve dense yerleşim
- Grid’de hizalama
- subgrid ile iç içe hizalama
- Kısa görev: eşit yükseklikte kart ızgarası
Düzen kararları
- Flexbox mı, Grid mi: karar rehberi
- Başlık, kenar çubuğu, içerik ve alt bilgi düzeni
- Taşma sorunları ve min-width: 0
- Düzen hatalarını geliştirici araçlarıyla ayıklamak
- Bitirme görevi: bir yönetim paneli düzeni
Pratik lablar
- Esnek sütun oranlarını ayarla: Kenar çubuğu sabit, içerik alanı esnek olacak şekilde flex-grow ve flex-basis değerlerini ver.
- Ezilen öğeyi kurtar: Araç çubuğunda logo daralınca eziliyor; flex-shrink ve min-width ile hangi öğenin küçüleceğini belirle.
- Daraldıkça sarılan araç çubuğu yap: Düğme gruplarını flex-wrap ve gap ile kuran, her genişlikte hizası bozulmayan bir araç çubuğu yaz.
- Öğeyi tam ortaya al: Giriş kutusunu ekranın tam ortasına justify-content ve align-items ile yerleştir.
- Kısa sayfada altbilgiyi aşağıda tut: İçerik az olduğunda yukarı kayan altbilgiyi Flexbox ile sayfanın dibine sabitle.
- Medya nesnesi kalıbını kur: Avatar, ad, metin ve eylem düğmelerinden oluşan yorum satırını her uzunlukta düzgün hizalanacak biçimde kur.
- Eşit sütunlu ızgara kur: repeat ve fr ile dört eşit sütunlu galeri ızgarası yaz.
- Kendiliğinden duyarlı kart ızgarası yap: auto-fit ve minmax ile medya sorgusu kullanmadan sütun sayısını genişliğe göre ayarlayan ızgara kur.
- auto-fill ile auto-fit farkını göster: Az öğeli bir ızgarada iki değerin farkını görselle göster ve Sardunya Sanat galerisine uygun olanı seç.
- Öğeyi çizgi numarasıyla yerleştir: Öne çıkan haberi grid-column ve grid-row ile iki sütun ve iki satır kaplayacak şekilde yerleştir.
- Adlandırılmış alanlarla sayfa planı yap: Başlık, kenar çubuğu, içerik ve altbilgiyi grid-template-areas ile kur ve mobilde alanları yeniden sırala.
- Boşlukları dense ile doldur: Farklı boyutlu fotoğraflar arasında boşluk kalan mozaik galeriyi dense yerleşimle doldur ve okuma sırası etkisini değerlendir.
- Hücre içi hizalamayı ayarla: Fiyat kartlarında düğmeleri justify-self ve align-self ile hücrenin altına hizala.
- Eşit yükseklikli kart ızgarası yap: Başlık uzunlukları farklı kartlarda başlık, metin ve düğmeyi subgrid ile hizalı tut.
- Form etiketlerini subgrid ile hizala: İç içe fieldset'lerdeki etiket ve alanları dış ızgaranın sütunlarına subgrid ile bağla.
- Flexbox mı Grid mi seç: Beş arayüz parçası için hangi düzen yönteminin uygun olduğuna karar ver ve birini uygula.
- min-width: 0 ile taşmayı durdur: Uzun URL ve kod bloğu içeren sütun ızgarayı taşırıyor; nedenini geliştirici araçlarıyla bul ve düzelt.
- Yönetim paneli düzenini kur: Daraltılabilir kenar çubuğu, sabit başlık ve kaydırılabilir içerik alanı olan panel düzenini Grid ve Flexbox ile kur.
Kurs hakkında
Flexbox ve Grid’in hizalama, boyutlandırma ve yerleştirme kurallarını tek tek dener, gerçek sayfa düzenlerini sağlam biçimde kurarsın.
Ne öğreneceksin
- Flexbox
- Grid
- Düzen kararları
Ön koşullar
Aynı yolun 101 düzeyindeki kurslarını bitirmiş olmak ya da o konuları biliyor olmak yeterlidir.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 201 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.