BOOTSTRAP 5 FLEX YAPI CLASSLARI

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