📘 CSS3 - Flexbox ve Grid Layout

Bu döküman, Yazılım Uzmanlığı kategorisinde Orta Seviye eğitim materyalidir. Aşağıda konunun detaylı açıklaması, örnekler ve pratik alıştırmalar bulacaksınız.

💡 Seviye: Orta — Bu içerik temel bilgilere sahip öğrenciler için tasarlanmıştır. Temel kavramları bildiğiniz varsayılır.

Flexbox Layout

.container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n    flex-wrap: wrap;\n}

CSS Grid Layout

.grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n}\n\n.wide { grid-column: span 2; }\n.tall { grid-row: span 2; }

Responsive Tasarım

@media (max-width: 768px) {\n    .grid { grid-template-columns: 1fr; }\n    .menu { display: none; }\n}

Modern CSS Özellikleri

ÖzellikKullanım
Custom Properties--renk: #e30613;
CSS Transitionstransition: all 0.3s ease;
CSS Animations@keyframes animasyon { }
Gradientsbackground: linear-gradient(...);
Filtersfilter: blur(5px);

🎯 Responsive Dashboard Projesi

  1. CSS Grid ile 3 sütunlu dashboard oluşturun
  2. Mobilde tek sütuna düşürün
  3. Kart bileşenleri tasarlayın
  4. Hover animasyonları ekleyin