Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, bir eğitmen tarafından Flexbox özellikleri anlatılmaktadır. Eğitmen, Visual Studio Code kullanarak örnekler göstermektedir.
- Video, Flexbox'ın flex item'lara verilebilecek özelliklerini detaylı şekilde ele almaktadır. Öncelikle flex item'lara renk atama, ardından order özelliği ile item sıralamasını değiştirme, justify content ve align self/align items ile item'ların iç düzenini düzenleme ve flex-grow özelliği ile boş alanları doldurma işlemleri gösterilmektedir. Eğitmen, her özelliği adım adım uygulamalı olarak anlatarak, responsive tasarımlarda bu özelliklerin nasıl kullanılacağını açıklamaktadır. Video, bir sonraki bölümde uygulamalar geliştirileceğini belirterek sona ermektedir.
- Flexbox Özellikleri Tanıtımı
- Bu derste flex item'lara verilebilecek flex özelliklerine bakılacak.
- Örnek için h1 ve p etiketleri kullanılarak box1, box2 ve box3 adında üç kutu oluşturuldu.
- Kutulara farklı renkler (kırmızı, mavi, yeşil) atanarak görsel olarak farklılaştırıldı.
- 01:09Order Özelliği
- Flex item'ların sırasını değiştirmek için order özelliği kullanılır.
- Order özelliğine sayı verildiğinde, sayılar küçükten büyüğe doğru sıralanır.
- Eğer order değeri verilmezse, item'lar sayfaya eklenme sırasına göre yerleşir.
- 02:06Align Self ve Align Items Özellikleri
- Justify content özelliği ile item'lar arasında boşluk bırakılabilir.
- Align self özelliği ile item'lar kendi içinde yukarı, aşağı veya ortaya hizalanabilir.
- Align items özelliği ile tüm item'lar orta tarafa hizalanabilir.
- 03:25Flex Grow Özelliği
- Flex grow özelliği ile item'lar boş alanları doldurabilir.
- Flex grow değeri 1, 2, 3 gibi verildiğinde, item'lar sırasıyla %16, %33, %50 oranında genişler.
- Sadece bir item'a flex grow verildiğinde, o item boş alanları doldurur ve diğer item'lar normal düzende yer alır.
- 06:44Flex Grow Kullanımı
- İki item'a da flex1 verildiğinde, boşluklar ortak olarak paylaşılır.
- Flex verilen item'lar responsive tasarımlarda da aynı oranda küçülür veya büyür.
- Öğrenilen özelliklerle oynayarak daha iyi anlaşılmalı ve bir sonraki bölümde uygulamalar geliştirilerek pekiştirilmelidir.