CSS3 - Flexbox ve Grid Layout — Limit Bilgisayar Kursu

📘 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

Özellik	Kullanım
Custom Properties	`--renk: #e30613;`
CSS Transitions	`transition: all 0.3s ease;`
CSS Animations	`@keyframes animasyon { }`
Gradients	`background: linear-gradient(...);`
Filters	`filter: blur(5px);`

🎯 Responsive Dashboard Projesi

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