Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından CSS Flexbox konusuna giriş yapılmaktadır.
- Videoda Flexbox'ın ne olduğu, temel kavramları ve kullanım alanları anlatılmaktadır. Eğitmen, Flexbox'ın "esnek kutu modeli" olarak tanımlandığını, konteyner ve flex item kavramlarını açıklamakta ve bu modelin modern web tasarımlarında float yerine tercih edildiğini belirtmektedir. Ayrıca main axis ve cross axis gibi temel terimler tanıtılmakta ve bir sonraki derste bu özelliklerin detaylı olarak ele alınacağı ifade edilmektedir.
- CSS Flexbox'a Giriş
- Bu derste CSS Flexbox'a giriş yapılacak ve sonraki derslerde Flexbox'ın özellikleri incelenecek.
- Flexbox, tasarımların sayfanın içindeki konumlarını, kutucukları veya elementleri düzenlemek için kullanılan bir modeldir.
- Flexbox, esnek kutu modeli olarak da adlandırılabilir ve konteyner içindeki item elemanlarının konumlarını kolayca düzenlemeyi sağlar.
- 00:48Flexbox'ın Temel Bileşenleri
- Flexbox modelinde konteyner "flex konteyner" olarak adlandırılır ve içinde "flex item" adı verilen elementler bulunur.
- Eskiden kutuların yan yana getirilmesi ve boşluklar float kullanılarak yapılırken, günümüzde modern sitelerde flexbox veya grid sistem tercih edilmektedir.
- Bir konteynerı flexbox haline getirmek için sadece "display: flex" özelliğini kullanmak yeterlidir ve bu özellik tüm tarayıcılarda desteklenmektedir.
- 02:14Flexbox'ın Eksenleri
- Flexbox'ta yatay eksen "main axis" (ana eksen) olarak kabul edilir ve dikey eksen "cross axis" olarak adlandırılır.
- Ana eksen başladığı yerin bittiği yerde "main end" olarak kabul edilir ve genişliği "main width" olarak adlandırılır.
- Dikey eksen başlama noktası "cross start", bitiş noktası ise "cross end" olarak adlandırılır.