Flexbox Basit Responsive Site Tasarımı - Flexbox Özellikleri Uygulama!

Опубликовано: 19 Январь 2025
на канале: SOSYAL BİLİŞİM

3,521

➤➤➤➤➤ 🅕🅛🅔🅧🅑🅞🅧 🅤🅨🅖🅤🅛🅐🅜🅐 ✔✔✔✔✔
Bu videomuzda; Flexbox özelliklerini kullanarak Flexbox ile site tasarımı yaptık.Bu tek sayfalık örnek uygulamada bir çok özelliğine değindik.CSS Derslerinde öğrendiğimiz çoğu komutu burada uygulama imkanı bulduk.
Değindiğimiz konulardan bazıları aşağıdaki gibidir.
▶flex-direction özelliği ile kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. Dört değer alır; row, row-reverse, column, column-reverse.
✔row: Esnek kutuları soldan sağa sıralar
✔row-reverse: Esnek kutuları sağdan sola sıralar
✔column: Esnek kutuları kolon olarak yukarıdan aşağı sıralar
✔column-reverse: Esnek kutuları row-reverse gibi ama alttan yukarı sıralar.

▶justify-content özelliği ile esnek kapsayıcı içindeki elemnaların x ekseninden nasıl hizalanacağını belirler. Beş değer alır. flex-start, flex-end, center, space-between, space-around.
✔flex-start: Esnek taşıyıcı içindeki kutular kapsayıcının başından başlayarak(flex-direction’da belirtildiği gibi) dizilirler.
✔flex-end: Elemanlar sondan başlayarak dizilir.
✔center: Kutular kapsayıcının orta çizgisine göre hizalanarak dizilirler.
✔space-between: Kutular eşit olarak dizilir. İlk kutu orta çizginin başında, son kutu sonunda yer alır.
✔space-around: Kutular arası boşluk eşit olacak şekilde dizilir.

▶align-items justify-content‘in yatayada yaptığını dikeyde yapar. İki veya daha fazla satırdan oluşan esnek kutuların dikeyde hizalanması için kullanılır. Altı değer alır. flex-start, flex-end, center, space-between, space-around, stretch.
● order Özelliği
Bazen row ya da column yerleşimini tersine çevirmek yeterli olmaz. Bu gibi durumlarda order kuralı ile öğeleri tek tek sıralandırabiliriz. Öğelerin başlangıç sıra değeri 0’dır, ama biz bu değeri pozitif ya da negatif bir değere eşitleyebiliriz.
● Normalize.css ve Reset.css özelliklerinden bahsettik.

Bu video'da oluşan kodlar aşağıdaki linkten indirilebilir.
https://drive.google.com/file/d/1x3Ki...

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
❤ ABONE Olmak için Tıkla! :https://www.youtube.com/c/SOSYALBİLİŞ...

İzlemeniz Gereken Yararlı Videolarımız!
➤ En Kolay Yolla Format Atmak :    • Format Nasıl Atılır? En Basit Yöntem ...
➤ Yerli Video Konferans Programımız :    • Video
➤ Facebook Gerçekleri :    • Video
➤ Zoom Kurucusu :    • Video

Sosyal Medya Hesaplarımız
☛ İnternet Sitemiz:
☛ İnstagram:   / sosyalbilisim79
☛ Twitter:   / sosyalbilisim79
☛ Facebook :   / sosyalbilisim79
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

#flexbox #responsivetasarım #css