CSS Flexbox Rehberi

CSS’de konumlandırma yapmak için kullanılan pek çok yöntem vardır. Bunlar arasında en yaygın ve kullanışlı olanı Flexbox yöntemidir. Bu yöntem ile responsive web sitelerini daha kolay tasarlayabilirsiniz.

CSS Flexbox özellikleri iki gruba ayrılır. Birinci grup, ebeveyn etiketlere yani kapsayıcı (container) etiketlere uygulanan özelliklerdir. İkinci grup ise çocuk etiketlere, yani kapsanan (container içerisindeki) etiketlere uygulanan özelliklerdir.

Not: Flexbox özelliklerinin kullanılabilmesi için öğeye veya ebeveynine display: flex veya display: inline-flex özelliği uygulanmalıdır.

Not: Her Flexbox özelliği, tüm tarayıcılarda çalışmayabilir kullanmadan önce hangi tarayıcıda çalıştığını öğrenmek için caniuse.com adresinden kontrol edebilir ve desteklemek istediğinizi tarayıcılara uygun olacak şekilde birimleri kullanabilirsiniz.

Ebeveyn (Parent) Etiketler İçin Kullanılan Flexbox Özellikleri

  • display: flex
  • display: inline-flex
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content
  • flex-flow

display: flex

Bu özelliğin tanımlandığı etiket esnek bir hal alır. Sayfanın daraltılması ile daralır, genişletilmesi ile genişler.

display: inline-flex

Tıpkı display: flex özelliği gibi uygulandığı etiketi esnek hale getirir. Aralarındaki fark display: flex, block yani tüm satırı kaplayan elemanlara uygulanır, display: inline-flex ise inline-block gibi satırın bir bölümünü kaplayan elemanlara uygulanır.

flex-direction

Öğelerin sıralanma yönünün dikey mi yoksa yatay mı olacağını belirlemek için kullanılır.

flex-direction: row; /* İçerisindeki öğeler yatay olarak sıralanır. */

flex-direction: row-reverse; /* İçerisindeki öğeler yatay ve tersten sıralanır. */

flex-direction: column; /* İçerisindeki öğeler dikey olarak sıralanır. */

flex-direction: column-reverse; /* İçerisindeki öğeler dikey ve tersten sıralanır. */

flex-wrap

Flex hale getirilmiş öğeler sayfanın daralması ve genişlemesi ile farklı davranışlar gösterebilir. Bu davranışlardan birisi sayfayla beraber esnemesi ve daralmasıdır. Bir diğeri ise sayfa daraldığında alt satıra kayma, sayfa genişlediğinde tekrar üst satıra çıkma davranışıdır.

flex-wrap: nowrap; /* Varsayılan yani default değerdir. Öğeyi esnek hale getirir ve ekran ne kadar daralırsa daralsın alt satıra kaydırmaz. */

flex-wrap: wrap; /* Sayfa daralmasına bağlı olarak öğeleri alt satıra kaydırır ve genişlemesi ile tekrar üst satıra çıkarır. */

flex-wrap: wrap-reverse; /* wrap değerinden tek farkı tersten sıralama yapmasıdır. Tersten sıralamadan kasıt, öğeler yukarıdan aşağıya değil aşağıdan yukarıya doğru kaydırılır. */

justify-content

Öğeleri yatayda hizalamak için kullanılır.

justify-content: flex-start; /* Varsayılan değerdir. Öğeleri sola yaslar. */

justify-content: flex-end; /* Öğeleri sağa yaslar. */

justify-content: center; /* Öğeleri ortada toplar. */

justify-content: space-between; /* Öğeleri, eşit aralıklarla mevcut alana dağıtır. En soldaki ve en sağdaki öğe bulundukları kenara yaslanmışlardır. */

justify-content: space-around; /* Öğeleri, eşit aralıklarla mevcut alana dağıtır. space-between'in aksine en soldaki ve en sağdaki kenara yaslı değildir. Kenar ile aralarında bir miktar boşluk vardır. */

justify-content: space-evenly; /* Öğeleri, eşit aralıklarla mevcut alana dağıtır. space-between ve space-around'den farklı olarak kenar ile aralarında bulunan boşluk, diğer öğelerin arasında bulunan boşluk ile eşittir. */

Aşağıdaki link üzerinden her birinin nasıl bir etkiye sahip olduğunu görebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content

align-items

Öğeleri dikeyde hizalamak için kullanılır.

align-items: stretch; /* Varsayılan yani default değerdir. Öğeler tüm alanı kaplayacak şekilde esnetilir. */

align-items: flex-start; /* Öğeleri yukarı yaslar. */

align-items: flex-end; /* Öğeleri aşağı yaslar. */

align-items: center; /* Öğeleri ortada toplar. */

align-items: baseline; /* Öğeler, kapsayıcı ebeveynin taban çizgisine yerleştirilir. */

Aşağıdaki link üzerinden her birinin nasıl bir etkiye sahip olduğunu görebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-items

align-content

Çoğunlukla align-items özelliği ile karıştırılmaktadır. Bunun sebebi aralarındaki çok ince farklardır. Öncelikle align-content değerinin kullanılabilmesi için birden çok satır öğe bulunmalıdır ve flex-wrap: wrap; özelliği uygulanmış olmalıdır. Align-items’de ise böyle bir şart yoktur. Tek satırlık bir öğede ve flex-wrap özelliğinin değeri fark etmeksizin çalışır. Asıl kritik fark ise, align-content hizalamayı diğer öğelere göre yaparken, align-items mevcut kapsayıcıya göre yapar ve bir bütün olarak düşünür.

align-content: stretch; /* Varsayılan yani default değerdir. Öğeler tüm alanı kaplayacak şekilde esnetilir.

align-content: flex-start; /* Öğeleri yukarı yaslar. */

align-content: flex-end; /* Öğeleri aşağı yaslar. */

align-content: center; /* Öğeleri ortada toplar. */

align-content: space-between; /* Öğeleri, eşit aralıklarla mevcut alana dağıtır. En üstteki ve en alttaki öğe bulundukları kenara yaslanmışlardır. */

align-content: space-around; /* Öğeleri, eşit aralıklarla mevcut alana dağıtır. space-between'in aksine en üstteki ve en alttaki kenara yaslı değildir. Kenar ile aralarında bir miktar boşluk vardır. */

align-content: space-evenly; /* Öğeleri, eşit aralıklarla mevcut alana dağıtır. space-between ve space-around'den farklı olarak kenar ile aralarında bulunan boşluk, diğer öğelerin arasında bulunan boşluk ile eşittir. */

Aşağıdaki link üzerinden her birinin nasıl bir etkiye sahip olduğunu görebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-content

Not: align ve justify kelimelerinin hangisinin sütun hangisinin satır olduğunu hatırlamak için kelime uzunlukları referans alınabilir. Yani, align kelimesi kısadır ve sütun gibidir, justify ise uzundur ve satır gibidir.

flex-flow

Steno yani kısa yazım özelliğidir. Aldığı değerler sırası ile flex-direction ve flex-wrap’dır.

.box {flex-flow: column nowrap}

Çocuk (Child) Etiketler İçin Kullanılan Flexbox Özellikleri

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self
  • flex

order

Flex yapı ile sıralanan alt öğeler varsayılan olarak HTML belgesindeki sırasına göre gösterilir. Order özelliği ile istenilen etiket, istenilen yere getirilebilir. Varsayılan değeri 0’dır ve sayı değerleri alır.

.box-1 {order: 2;}
.box-2 {order: 4;}
.box-3 {order: 3;}
.box-4 {order: 1;}

flex-grow

Öğelerin, birbirlerine kıyasla büyüme oranlarını belirlemek için kullanılır. Örneğin, sayfa esnekliğine göre bazı öğeler 1 oranında, bazıları 5 oranında büyüyebilir.

.list-1 {flex-grow: 1;}
.list-2 {flex-grow: 1;}
.list-3 {flex-grow: 5;}

flex-shrink

Öğelerin, birbirlerine kıyasla küçülme oranlarını belirlemek için kullanılır. Örneğin, sayfa esnekliğine göre bazı öğeler 1 oranında, bazıları 5 oranında küçülebilir.

.list-1 {flex-shrink: 1;}
.list-2 {flex-shrink: 1;}
.list-3 {flex-shrink: 5;}

flex-basis

Esnek bir öğenin ilk uzunluğunu belirlemek için kullanılır.

.box {flex-basis: 200px;}

align-self

Öğelerin ayrı ayrı ve dikey eksende hizalanmasını sağlamak için kullanılır. Aşağıdaki örnekte aynı kapsayıcı içerisindeki öğelerden birisi yukarıya, diğeri aşağıya hizalanmıştır. Alabileceği değerler, align-items’in alabildiği değerler ile aynıdır.

.box-1 {align-self: flex-start};
.box-2 {align-self: flex-end};

flex

Steno yani kısa yazım özelliğidir. Aldığı değerler sırası ile flex-grow, flex-shrink ve flex-basis’dir.

.box {flex: 1 5 200px};

Not: Aşağıdaki siteler aracılığıyla oyunlaştırılmış bir şekilde Flexbox alıştırması yapabilirsiniz.

https://flexboxfroggy.com/

http://www.flexboxdefense.com/

Yorum Yap