Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Emre Sabuncu tarafından sunulan CSS derslerinin üçüncü bölümüdür. Emre, flex yapısının temel özelliklerini ve kullanımını anlatmaktadır.
- Videoda flex yapısının esnek kutu oluşturma özelliği detaylı olarak gösterilmektedir. Emre, bir div kutusu oluşturarak başlayıp, içine üç div kutusu yerleştirerek flex özelliğinin nasıl çalıştığını pratik bir örnek üzerinden açıklamaktadır. Flex yapısının temel mantığı, kapsayıcıya flex özelliği verildiğinde içindeki tüm etiketlerin esnek bir yapıya sahip olması ve sayfa boyutuyla uyumlu şekilde davranmasıdır. Ayrıca, flex ve inline flex kullanırken display özelliği verildiğinde webkit ön ekinin kullanılması gerektiği de belirtilmektedir.
- Flex Yapısı Tanıtımı
- CSS 3 derslerinden flex yapısı, esnek kutu oluşturmamızı sağlayan bir özelliktir.
- Örnek için bir div oluşturulup "kutu" class'ı verilerek genişliği yüzde yetmiş, yüksekliği beşyüz piksel, kenarlık ve marjin değerleri ayarlanmıştır.
- Kutunun içine üç adet div daha eklenerek "kutucuk" class'ı verilmiş ve bu div'lerin genişliği ve yüksekliği üçyüz piksel, kenarlık kırmızı olarak ayarlanmıştır.
- 02:34Flex Yapısının Kullanımı
- Normalde div'ler blok seviyesinde olduğu için yan yana gelmezler, display inline block kullanılsa da karmaşık bir yapı oluşur.
- Flex yapısını kullanmak için "display: flex" özelliği üstteki kutuya (kapsayıcıya) verilmelidir.
- Flex özelliği eklendiğinde içerdikleri div'ler yan yana gelir ve sayfa küçültüldüğünde esnek bir şekilde küçülme özelliğine sahiptir.
- 05:04Flex Yapısının Özellikleri
- Flex yapısı, kapsayıcıya verildiğinde içindeki tüm etiketler esnek bir yapıya sahip olur ve blok seviyesinden çıkar.
- Flex yapısı hem inline block hem de inline seviyesine sahip olur.
- Flex ve inline flex kullanırken "display" özelliğine "webkit" yazmak gerekiyor, aksi halde Safari'de (eski sürümlerde) sorun çıkabilmektedir.