Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Siper Akademi'de sunulan bir web geliştirme eğitim dersidir. Eğitmen, önceki derste esnek kutucuklara (flex divlere) örnekler verdiğini belirterek, bu derste yeni flexbox özelliklerini anlatmaktadır.
- Videoda flexbox'ın temel özellikleri adım adım gösterilmektedir. Eğitmen önce section ve div'lere esneklik vererek webkitbox flex özelliğini tanımlar, ardından align center ile div'leri ortalar. Daha sonra flex-stretch özelliğini kullanarak esnek olmayan kutucuklara esneklik katar ve flex-stretch ile flex olmayan kutucukların nasıl uzatılacağını gösterir. Video, flexbox kurallarının temel kullanımını öğrenmek isteyenler için faydalı bir kaynaktır.
- 00:10Esnek Divlere Yeni Özellikler
- Siper Akademi'nde esnek divlere (esnek kutucuklara) yeni özelliklerle devam edilecek.
- Önceki derste çalışmayan kodun ekran görüntüsü gösteriliyor.
- Webkit flex özelliği tanımlanması durumunda alt elemanların esnek davranmasını sağlıyor.
- 01:35Webkit Flex Özellikleri
- Section kısmına esneklik ve yükseklik (100 piksel) tanımlanıyor.
- Diğer div'lere de aynı yükseklik (300 piksel) tanımlanıyor.
- Align center özelliği ile div'ler section sayfasında ortalanıyor.
- 03:42Flex Stretch Özelliği
- Webkitbox stretch özelliği tanımlanıyor.
- Flex olmayan kutucuklara esneklik katılıyor.
- Flex özelliği olan alanlarla stretch özelliği ile div'ler belirli boyutlarda uzatılıyor, diğerleri sabit kalıyor.
- 06:08Dersin Sonu
- Scratch kodu ile istediğiniz örnekler yapılabilir.
- Esnek div kuralları bu kadardı.
- İstediğiniz örnekleri çoğaltabilirsiniz.