| flex | Bu özellik flex-grow, flex-shrink ve flex-basis özelliklerini birlikte kullanmamızı sağlar. |
| flex-basis | Kutulara max genişlik değerleri vermek için kullanılır. Varsayılan değeri auto’dur. |
| flex-direction | Bu özellik ile kutuların hangi yönde (yatay veya dikeyde) sıralanacağını belirleriz. 4 farklı değer verebiliriz. Bunlar:
- column : Kutular, dikeyde yukardan aşağı doğru yerleştirilir.
- column-reverse : Kutular, dikeyde aşağıdan yukarı doğru yerleştirilir.
- row : Kutular, yatayda soldan sağa doğru yerleştirilir. ( Varsayılan değerdir. )
- row-reverse : Kutular, yatayda sağdan sola doğru yerleştirilir.
|
| flex-flow | Bu özellik flex-direction ve flex-wrap özelliklerini birlikte kullanmamızı sağlar. |
| flex-grow | Bu özelliği verdiğimiz kutu, diğer kutulara göre verilen oranda genişler. |
| flex-shrink | Bu özelliği verdiğimiz kutu, diğer kutulara göre verilen oranda daralır. |
| flex-wrap | Kapsayıcı etikete sığmayan kutuların alt veya üst satırdan devam edip etmeme durumunu belirleriz. 3 farklı değer verebiliriz. Bunlar:
- wrap : Satıra sığmayan kutuların bir alt satıra kaydırılmasını sağlar.
- nowrap : Satıra sığmayan kutuların bir alt satıra kaydırılmasını engeller. Aynı satırdan devam eder.
- wrap-reverse : Satıra sığmayan kutuların bir üst satıra kaydırılmasını sağlar. wrap değerinin tam tersi yönde uygulanır.
|
| order | Kapsayıcı etiket içerisinde kutular yazılma sırasına göre yerleştirilir. Bu sıralamayı order özelliği ile değiştirebiliriz. Değer olarak rakam veriyoruz. Varsayılan değeri 0’dır. |
| justify-content | Kapsayıcı içerisindeki kutuların yatayda nasıl hizalanacağını belirleriz. 5 farklı değer verebiliriz. Bunlar:
- center : Kutular, kapsayıcı içerisinde yatayda ortalanır.
- flex-end : Kutular, kapsayıcının sonundan (sol taraf) başlayarak yerleştirilir.
- flex-start : Kutular, kapsayıcının başından (sağ taraf) başlayarak yerleştirilir. (Varsayılan değerdir.)
- space-around : Kutular arası boşluk eşit olacak şekilde yerleştirilir.
- space-between : Kutular bulundukları alana aralarında eşit mesafe olacak şekilde yerleştirilir.
|
| align-content | Kapsayıcı içerisinde iki veya daha fazla satırdan oluşan kutuların dikeyde nasıl hizalanacağını belirleriz. 6 farklı değer verebiliriz. Bunlar:
- center : Satırlar, kapsayıcı içerisinde dikeyde ortalanır.
- flex-start : Satırlar, kapsayıcı içerisinde yukardan başlayarak yerleştirilir.
- flex-end : Satırlar, kapsayıcı içerisinde aşağıdan başlayarak yerleştirilir.
- space-around : Satırlar arası boşluk eşit olacak şekilde yerleştirilir.
- space-between : Satırlar arası boşluk eşit olacak şekilde yerleştirilir.
- stretch : Satırlar, kapsayıcı etiket içerisini tamamen doldurur. Yani her birinin yüksekliğinin 100% olmasını sağlar.
|
| align-items | Kapsayıcı içerisindeki kutuların dikeyde nasıl hizalanacağını belirleriz. justify-content özelliğinin tam tersi diyebiliriz. 5 farklı değer verebiliriz. Bunlar:
- center : Kutular, kapsayıcı içerisinde dikeyde ortalanır.
- flex-start : Kutular, kapsayıcı içerisinde yukardan başlayarak yerleştirilir.
- flex-end : Kutular, kapsayıcı içerisinde aşağıdan başlayarak yerleştirilir.
- stretch : Kutuların yüksekliğinin, kapsayıcı etiket yüksekliğinde yani 100% olmasını sağlar. (Varsayılan değerdir.)
- baseline : Kutular, yazı boyutlarına göre dikeyde yerleştirilir.
|
| align-self | Her bir kutuyu özel olarak hizalamak için kullanılır. Bu özellik ile kutulara verilen genel özelliklerinin dışına çıkılabilir. 6 farklı değer verebiliriz. Bunlar:
- flex-start
- flex-end
- center
- auto
- stretch
- baseline
|
