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.
Bu konuda yeni geliştirdiğimiz web sitesi üzerinden pratik yaparak konuyu daha iyi anlayabilirsiniz.
Pratik yapmak için CSS Flexbox Web Sitesine göz atabilirsiniz.
Şimdi adım adım bu özelliği nasıl kullanıyoruz ona bakalım.
Şu şekilde Html kodlarımız olsun.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; } .flex-item{ background-color:coral; padding:30px; margin:10px; font-size:30px; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-direction:column; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-direction:column-reverse; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-direction:row; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-direction:row-reverse; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-wrap:wrap; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-wrap:nowrap; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container{ background-color:cornflowerblue; display:flex; flex-wrap:wrap-reverse; } </style> |
CSS FLEX FLOW ÖZELLİĞİ
Bu özellik flex-direction ve flex-wrap özelliklerini birlikte kullanmamızı sağlar.
Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* İlk örnekteki gibi 2 özelliği ayrı ayrı yazmak yerine, ikinci örnekteki gibi tek özellik ile aynı işlemi yapabiliriz. */ <style> .flex-container { display: flex; flex-direction:row; flex-wrap:wrap; } </style> <style> .flex-container { display: flex; flex-flow:row wrap; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container { background-color: cornflowerblue; display: flex; justify-content:center; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container { background-color: cornflowerblue; display: flex; justify-content:flex-end; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container { background-color: cornflowerblue; display: flex; justify-content:flex-start; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container { background-color: cornflowerblue; display: flex; justify-content:space-around; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<style> .flex-container { background-color: cornflowerblue; display: flex; justify-content:space-between; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-items:center; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-items:flex-start; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-items:flex-end; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-items:stretch; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-content:center; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-content:flex-start; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-content:flex-end; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-content:space-around; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-content:space-between; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height: 400px; flex-wrap: wrap; align-content:stretch; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> .flex-container { background-color: cornflowerblue; display: flex; } .flex-item { background-color: coral; padding: 30px; margin: 10px; font-size: 30px; } </style> <div class="flex-container"> <div class="flex-item" style="order:3;">1</div> <div class="flex-item" style="order:1;">2</div> <div class="flex-item" style="order:4;">3</div> <div class="flex-item" style="order:2;">4</div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .flex-container { background-color: cornflowerblue; display: flex; } .flex-item { background-color: coral; padding: 30px; margin: 10px; font-size: 30px; } </style> <div class="flex-container"> <div class="flex-item" style="flex-grow: 1;">1</div> <div class="flex-item" style="flex-grow: 1;">2</div> <div class="flex-item" style="flex-grow: 2;">3</div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> .flex-container { background-color: cornflowerblue; display: flex; } .flex-item { background-color: coral; padding: 30px; margin: 10px; font-size: 30px; width:33.3%; } </style> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item" style="flex-shrink: 5;">2</div> <div class="flex-item">3</div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .flex-container { background-color: cornflowerblue; display: flex; } .flex-item { background-color: coral; padding: 30px; margin: 10px; font-size: 30px; } </style> <div class="flex-container"> <div class="flex-item" style="flex-basis:50px">1</div> <div class="flex-item" style="flex-basis:200px">2</div> <div class="flex-item" style="flex-basis:100px">3</div> </div> |
FLEX
Bu özellik flex-grow, flex-shrink ve flex-basis özelliklerini birlikte kullanmamızı sağlar.
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* İlk örnekteki gibi 3 özelliği ayrı ayrı yazmak yerine, ikinci örnekteki gibi tek özellik ile aynı işlemi yapabiliriz. */ <style> .flex-item { flex-grow: 3; flex-shrink: 2; flex-basis: 200px; } </style> <style> .flex-item { flex:3 2 200px; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> .flex-container { background-color: cornflowerblue; display: flex; height:300px } .flex-item { background-color: coral; padding: 30px; margin: 10px; font-size: 30px; } </style> <div class="flex-container"> <div class="flex-item" style="align-self:flex-start">1</div> <div class="flex-item" style="align-self:flex-end">2</div> <div class="flex-item" style="align-self:center">3</div> <div class="flex-item" style="align-self:auto">4</div> <div class="flex-item" style="align-self:stretch">5</div> <div class="flex-item" style="align-self:baseline">6</div> </div> |
TARAYICI DESTEĞİ
| Chrome | IE | Firefox | Safari | Opera |
| 29.0 | 11.0 | 22.0 | 10 | 48 |
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.
