CSS Flexbox İle Site Yerleşimi - Flexbox Kutu Hizalama

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

1,708

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
🅕🅛🅔🅧🅑🅞🅧 🅨🅐🅟🅘🅢🅘
✔Bu videomuzda; Css Flexbox özelliklerini kullanarak kutu yerleşimleri ve hizalamalarına değineceğiz.Esnek kutu modeli ile kutuları yan yana-alt alta getirmenin yanı sıra kutuları belli bir alanda ortalama yada eşitbir şekilde dağıtma konusundan bahsedeceğiz.
▶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.

▶Video'da gösterilen web adresine aşağıdaki linkten gidebilirsiniz.
● https://flexboxfroggy.com/#tr

Bu video'da oluşan kodlara aşağıdaki linkten ulaşabilirsiniz.↴
● https://drive.google.com/file/d/1WtRM...
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
❤ 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 #css #esnekkutumodeli