CSS Flexbox Layout - Alıgn-Items (Flex Dıkey Hızalama)

CSS flex'in nesneleri dikey hizalamak için kullanılan özelliğine align-items verilir. Bu özellik ile container(taşıyıcı) div içinde bulunan nesneler dikey de hizalanır.
align-items özelliği de display:flex özelliği gibi taşıyıcı div elemanına verilir.

Örneğin div nesnesi içinde bulunan diğer nesneleri dikey eksende ortalamak için taşıyıcı div'e
display:flex; ve
align-items:center;
özellikleri verilmelidir.

Örneğin aşağıda görülen yapı oluşturulduğunda container içinde bulunan diğer nesneler dikey eksende ortalanmış olarak görüntüleneceklerdir. <div style="height: 150px; display: flex; align-items: :center;"> <div style="height: 30px; margin:5px;"> Div1 </div> <div style="height: 90px; margin:5px;"> Div2 </div> <div style="height: 60px; margin:5px;"> Div3 </div> </div>

align-items özelliği 5 farklı değer alır. Bu özellikler şunlardır.
flex-start : Nesneler taşıyıcı div'in üst tarafına yaslanmış şekilde sıralanırlar.
flex-end : Nesneler taşıyıcı div'in alt tarafına yaslanmış şekilde sıralanırlar.
center : Nesneler taşıyıcı div'e ortalanmış şekilde sıralanırlar.
stretch : Nesneler taşıyıcı div'in yüksekliğini tamamen kaplayacak şekilde yükseklikleri uzatılarak sıralanırlar.
baseline : Nesneler içinde bulunan yazılar aynı hizada olacak şekilde sıralanırlar.


Yorumlar


https://www.phpr.org/php-data-objects-pdo/ linkinden faydalanabilirsin

hocam veri tabanı ile ilgili anlatımı ne zaman yayınlarsınız ? yada tavsiye edebileceğiniz bir youtuber varmı ?

Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com