? 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