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