Css Flex Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te flex özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.Flex özelliği, float ve position gibi özellikleri kullanmadan responsive (duyarlı-esnek) tasarımlar yapabilmemizi sağlayan harika bir özelliktir.En başta biraz karışık gelebilir ama biraz zaman ayırıp örnekler yaptığınız zaman daha iyi anlaşılacaktır.Şimdi adım adım bu özelliği nasıl kullanıyoruz ona bakalım.Şu şekilde html kodlarımız olsun.

Flex özelliğini kullanırken ilk olarak bir kapsayıcı etiket ve sonrasında da içerisine bu özelliği uygulayacağımız etiketleri (kutuları) tanımlarız.Sonra kapsayıcı etiketin display özelliğine flex değeri vermemiz gerekiyor.Böylece kapsayıcı etiketimiz esnek hale gelmiş olacak.Css kodlarımız,

css-dersleri-flex-kullanimi-1

Gördüğünüz gibi normalde div’lerin tüm satırı kaplamaları gerekirken, flex değeri ile yan yana konumlandılar.

Özellikleri anlatırken önce kapsayıcı etikete uygulanan özelliklere daha sonra da kutulara verebildiğimiz özelliklere bakalım.Kapsayıcı etikete uygulanan özellikler şunlar : 

1 – flex-direction : 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.

Örneğimizde bu 4 değeri uygulayıp aradaki farkları görelim.

css-dersleri-flex-kullanimi-2

css-dersleri-flex-kullanimi-3

css-dersleri-flex-kullanimi-4

css-dersleri-flex-kullanimi-5

2 – 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.

Örneğimizde bu 3 değeri uygulayıp aradaki farkları görelim.

css-dersleri-flex-kullanimi-6

css-dersleri-flex-kullanimi-7

css-dersleri-flex-kullanimi-8

3 – flex-flow : Bu özellik flex-direction ve flex-wrap özelliklerini birlikte kullanmamızı sağlar.Örneğin,

4 – 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.space-around ile aralarındaki fark: bu değeri verdiğimizde ilk kutu sola son kutu sağa dayalı yerleştirildikten sonra kutular arasında eşit mesafe bırakılır.space-around da ilk ve son kutu sola ve sağa dayalı olmaz.

Örneğimizde bu 5 değeri uygulayıp aradaki farkları görelim.

css-dersleri-flex-kullanimi-9

css-dersleri-flex-kullanimi-10

css-dersleri-flex-kullanimi-11

css-dersleri-flex-kullanimi-12

css-dersleri-flex-kullanimi-13

5 – 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.

Dikkat : Bu özelliği kullanırken kapsayıcı etikete bir yükseklik değeri vermemiz gerekiyor ve daha iyi anlaşılması için flex-wrap özelliğine wrap değerini vererek kutuların iki satırda olmasını sağlayalım.

Dikkat : Eğer kapsayıcı içerisinde birden fazla satırda kutular varsa, bu özellik her satıra ayrı ayrı uygulanır.Bir sonraki özellik olan align-content ile aralarındaki fark budur.Align-content özelliği tüm satırlara toplu uygulanır.Örneğin align-items özelliğine center değeri verdiğimizde her satırdaki kutular o satır içerisinde ortalanır.Align-content özelliğine center değeri verdiğimizde ise tüm satırlar kapsayıcıya göre ortalanır.Bir sonraki özelliğe gelince aradaki fark daha iyi anlaşılacaktır.

Örneğimizde bu 5 değeri uygulayıp aradaki farkları görelim.

css-dersleri-flex-kullanimi-14

css-dersleri-flex-kullanimi-15

css-dersleri-flex-kullanimi-16 

css-dersleri-flex-kullanimi-17

6 – 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. space-around ile aralarındaki fark: bu değeri verdiğimizde ilk satır yukarı son satır aşağı dayalı yerleştirildikten sonra satırlar arasında eşit mesafe bırakılır.space-around da ilk ve son satır yukarıya ve aşağıya dayalı olmaz.

      ► stretch : Satırlar, kapsayıcı etiket içerisini tamamen doldurur.Yani her birinin yüksekliğinin 100% olmasını sağlar.

Dikkat : Bu özelliği kullanırken kapsayıcı etikete bir yükseklik değeri vermemiz gerekiyor ve daha iyi anlaşılması için flex-wrap özelliğine wrap değerini vererek kutuların iki satırda olmasını sağlayalım.

Örneğimizde bu 6 değeri uygulayıp aradaki farkları görelim.

css-dersleri-flex-kullanimi-18

css-dersleri-flex-kullanimi-19

css-dersleri-flex-kullanimi-20

css-dersleri-flex-kullanimi-21

css-dersleri-flex-kullanimi-22

css-dersleri-flex-kullanimi-23

Buraya kadar kapsayıcı etikete verdiğimiz özellikleri gördük.Şimdi de kutulara verebileceğimiz özelliklere bakalım.

1 – 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.

css-dersleri-flex-kullanimi-24

Gördüğünüz gibi kutulara verdiğimiz order değerleri ile yerleştirilme sırası değişti.

2 – flex-grow : Bu özelliği verdiğimiz kutu diğer kutulara göre verilen oranda genişleyecektir.Örneğin ilk iki kutuya 1 değerini, üçüncü kutuya 2 değerini verelim.Üçüncü kutu diğer kutulardan 2 kat daha geniş olacaktır.Varsayılan değeri 0’dır.

css-dersleri-flex-kullanimi-25

3 – flex-shrink : Bu özelliği verdiğimiz kutu diğer kutulara göre verilen oranda daralacaktır.Örneğin her kutunun width değerine 33.3% vererek eşit genişlikte oluşturalım.Sadece ikinci kutunun flex-shrink değerine 5 verelim.Normalde tüm kutular eşit genişlikte iken tarayıcının genişliğini küçülttüğünüz zaman, ikinci kutu diğerlerine göre 5 kat daha fazla daralacaktır.Varsayılan değeri 1’dır.

css-dersleri-flex-kullanimi-26

4 – flex-basis : Kutulara max genişlik değerleri vermek için kullanılır.Örneğin 3 kutuya da başlangıçta farklı genişlik değerleri verelim.Eğer boş alan varsa kutular bu genişlikte olacaktır.Ama boş alan yoksa kutular daralacaktır.Varsayılan değeri auto’dur.

css-dersleri-flex-kullanimi-27

5 – flex : Bu özellik flex-grow, flex-shrink ve flex-basis özelliklerini birlikte kullanmamızı sağlar.Örneğin,

6 – align-self : Her bir kutuyu özel olarak hizalamak için kullanılır.Bu özellik ile kutulara verilen genel özelliklerinin dışına çıkılabilir.Yani etkin değer bu olacak.6 farklı değer verebiliriz.Bunlar : 

      ► flex-start

      ► flex-end

      ► center

      ► auto

      ► stretch

      ► baseline

Dikkat : Bu özelliği kullanırken kapsayıcı etikete bir yükseklik değeri vermemiz gerekiyor.

css-dersleri-flex-kullanimi-28

Tarayıcı Desteği

ChromeIEFirefoxSafariOpera
29.011.022.01048

Bu resimde tarayıcıların flex özelliklerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 32 – Filter Kullanımı

Sonraki : Css Dersleri 34 – Object Fit Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +