FLEX YAPININ UYGULANMASI
Flex yapı için d-flex sınıfı kullanılır. Yapının sadece belirli ekranlarda kullanılması isteniliyorsa araya ekran kısaltması eklenir. d-sm-flex gibi.
FLEX YÖNLENDİRME
flex-row : yatay yön
flex-reverse-row : yatay ters yön
flex-column : dikey yön
flex- reverse-column : dikey ters yön
Ekranlara göre yön değiştirmek için yine araya ekran kısaltması eklenir. flex-sm-row gibi
FLEX YATAY HİZALAMA
.justify-content-start : sol
.justify-content-end : sağ
.justify-content-center : ortala
.justify-content-between : içeriğe göre yay (kenardan boşuk bırakma)
.justify-content-around : içeriğe göre yay (kenardan boşuk bırakma)
.justify-content-evenly : içeriğe göre yay (kenar ve ara boşlukları eşitle)
Ekranlara göre hizalama değiştirmek için yine araya ekran kısaltması eklenir. justify-content-sm-end gibi
FLEX DİKEY HİZALAMA
.align-items-start : üst
.align-items-end : alt
.align-items-center : ortala
.align-items-baseline : metin boyutlarına göre hizala
.align-items-stretch : üstten alta uzat
Ekranlara göre hizalama değiştirmek için yine araya ekran kısaltması eklenir. align-items-sm-end gibi
Hizalanmış elemanlara,diğerlerini değiştirtmeden kendine özgü hizalama vermek için align-self sınıfı kullanılır. align-self-end gibi
FLEX GENİŞLİK ve BOŞLUK
Flex yerleşmiş elemanları kaplayacağı yeri belirtmek için flex-grow sınıfı kullanılır. Örneğin flex-grow-1
Genişliğinin bozulmaması istenen elemanlarda flex-shrink sınıfı kullanılır. Örneğin flex-shrink-0 öğenin genişliğinin bozulması engeller.
FLEX AUTO MARGIN
YATAY
me-auto : e harfi end kelimesinin ilk harfidir. En sağı temsil eder. Flex yerleşmiş elemanlardan herahngi birine me-auto sınıfı verilirse, kendinden sonra gelen öğeler yatayda kapsayıcı sonuna (en sağa) yerleşirler
ms-auto : s harfi start kelimesinin ilk harfidir. En solu temsil eder. Flex yerleşmiş elemanlardan herahngi birine ms-auto sınıfı verilirse, kendinden önce gelen öğeler yatayda kapsayıcı başına (en sola) yerleşirler
DİKEY
mb-auto : b harfi bottom kelimesinin ilk harfidir. En altı temsil eder. Flex yerleşmiş elemanlardan herahngi birine mb-auto sınıfı verilirse, kendinden sonra gelen öğeler dikeyde kapsayıcı sonuna (en alta) yerleşirler
mt-auto : t harfi top kelimesinin ilk harfidir. En üstü temsil eder. Flex yerleşmiş elemanlardan herahngi birine mt-auto sınıfı verilirse, kendinden önce gelen öğeler dikeyde kapsayıcı başına (en üste) yerleşirler
FLEX TAŞMA
.flex-nowrap : öğelerin aşağıya taşması engellenir
.flex-wrap : öğelerin aşağıya taşmasına izin verilir.
.flex-wrap-reverse : öğelerin aşağıya taşmasına izin verilir ve terste sıralanırlar.
Ekranlara göre taşma durumunu değiştirmek için yine araya ekran kısaltması eklenir. flex-sm-wrap gibi
FLEX SIRASI
Flex öğelerin sırasını değiştirmek için order sınıfı kullanılır. order-1 , order-2 gibi
Farklı ekranlar için yine araya ekran kısaltması eklenir. order-sm-1 , order-lg-3 gibi
FLEX İÇERİK DİKEY HİZALAMA
Flex yapı içerisindeki tüm içeriği dikey hizalamak için align-contet sınıfı kullanılır.
.align-content-start .align-content-end .align-content-center .align-content-around .align-content-stretch
Farklı ekranlar için araya ekran kısaltması eklenir. align-content-md-center gibi
