Css Flex Kullanımı

Bu yazımızda 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 şunlardır.

CSS FLEX DİRECTİON ÖZELLİĞİ

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

CSS FLEX WRAP ÖZELLİĞİ

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

CSS FLEX FLOW ÖZELLİĞİ

Bu özellik flex-direction ve flex-wrap özelliklerini birlikte kullanmamızı sağlar.

Örneğin;

CSS JUSTİFY CONTENT ÖZELLİĞİ

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

CSS ALİGN İTEMS ÖZELLİĞİ

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.

 Önemli  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.

 Önemli  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

CSS ALİGN CONTENT ÖZELLİĞİ

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.

 Önemli  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.

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.

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

FLEX SHRİNK

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

FLEX BASİS

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

FLEX

Bu özellik flex-grow, flex-shrink ve flex-basis özelliklerini birlikte kullanmamızı sağlar.

Örneğin,

ALİGN 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

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

css-dersleri-flex-kullanimi-28

TARAYICI DESTEĞİ

ChromeIEFirefoxSafariOpera
29.011.022.01048

Bu tabloda 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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply

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