CSS3 flexbox Esnek Kutu Kullanımı

CSS3 ile birlikte gelen flexbox veya esnek kutular kullanılarak sayfa içindeki elemanların yön, hızlama gibi yerleşim işlemlerinin nasıl yapılacağı ile ilgili bilgiler yer alıyor.

Flex, esnek kutu modeli sunduğundan dolayı farklı ekran boyutlarında farklı bir görüntü vermesini kolay şekilde sağlayabiliriz.

Tarayıcı Desteği

Tablodaki değerler css3 flex özelliğini destekleyen ilk tarayıcı sürümlerini belirtmektedir.

Özellik Chrome IE / Edge Firefox Safari Opera
flex 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
6.1 -webkit- 17.0
15.0 -webkit-

CSS3 flex nedir?

Flex bir taşıyıcıdır. Esnek kutu(flexbox) modeli taşıyıcı ve elemanlardan oluşur.

Esnek kutu kullanımı için öncelikle elemanları taşıyan bir taşıyıcı tanımlanması gerekir.

Taşıyıcının display özelliğine flex veya inline-flex değerini vererek tanımlanır.

Kapsayıcı içerisinde birden fazla eleman bulunabilir.

Taşıyıcı elemana tanımlanan flex özelliğiyle taşıyıca esneklik kazandırır.

Böylece alt elemanlar taşıyıcı içerisinde kolay bir şekilde konumlanabilir hale gelir.

Varsayılan olarak elemanlar kapsayıcı içerisinde bir satır boyunca konumlandırılır.

Tüm örneklerde kullanılan HTML elemanları

<div class="kapsayici">
  <div class="eleman">eleman 1</div>
  <div class="eleman">eleman 2</div>
  <div class="eleman">eleman 3</div> 
</div>

İlk örneğimiz

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
}

.eleman {
  background-color: #F1DA36;
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Yön belirlemek

CSS içindeki direction özelliği hem flex uygulanmış elemanları hem de yazıların hangi yönde başlayacağını belirler.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  direction: rtl;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Diğer bir yöntem ise CSS flex-direction özelliğidir.

Bu özellik sayesinde elemanların yönü hem yatay hem de dikey olarak belirlenebilir.

Aldığı değerler;

  • row: Elemanları soldan sağa yatay sıralar. (Varsayılan)
  • row-reverse: Elemanları sağdan sola yatay sıralar.
  • column: Elemanları yukarıdan aşağı dikey sıralar.
  • column-reverse: Elemanları aşağıdan yukarı dikey sıralar.

Aşağıdaki örnekte row değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  flex-direction: row;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

CSS flex-direction özelliği kullanılmadığında varsayılandır.

Aşağıdaki örnekte row-reverse değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  flex-direction: row-reverse;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte column değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  flex-direction: column;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte column-reverse değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  flex-direction: column-reverse;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Yatay hizalamak

Flex uygulanmış elemanları yatay olarak hizalamak için justify-content özelliği kullanılır.

Aldığı değerler;

  • flex-start: Elemanlar kapsayıcının başından başlayarak hizalanır. (Varsayılan)
  • flex-end: Elemanlar kapsayıcının sonundan başlayarak hizalanır.
  • center: Elemanlar kapsayıcının ortasından başlayarak hizalanır.
  • space-between: Elemanlardan ilk kutu kapsayıcının başında, son kutu kapsayıcının sonunda olacak şekilde eşit olarak hizalanır.
  • space-around: Elemanlar arası boşluk eşit olacak şekilde hizalanır.

Aşağıdaki örnekte flex-start değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  justify-content: flex-start;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte flex-end değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  justify-content: flex-end;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte center değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  justify-content: center;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte space-between değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  justify-content: space-between;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte space-around değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  justify-content: space-around;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Dikey hizalamak

Flex özelliği uygulanmış elemanları dikey olarak hizalamak için align-items özelliği kullanılır.

Aldığı değerler;

  • flex-start: Elemanlar kapsayıcının başından başlayarak hizalanır.
  • flex-end: Elemanlar kapsayıcının altından başlayarak hizalanır.
  • center: Elemanlar kapsayıcının ortasına başlayarak hizalanır.
  • baseline: Elemanlar yazı boyutlarına göre hizalanır.
  • stretch: Elemanların yüksekliği kapsayıcının yüksekliği kadar olur. (Varsayılan)

NOT: Elemanları dikey hizalamak için kapsayıcıya yükseklik değeri verilmesi gerekir.

Aşağıdaki örnekte stretch değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 500px;
  align-items: stretch;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
}

Aşağıdaki örnekte flex-start değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 500px;
  align-items: flex-start;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
}

Aşağıdaki örnekte flex-end değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 500px;
  align-items: flex-end;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
}

Aşağıdaki örnekte center değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 500px;
  align-items: center;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
}

Aşağıdaki örnekte baseline değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 500px;
  align-items: baseline;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 20px;
}

.eleman:nth-child(1){font:30px arial;}
.eleman:nth-child(2){font:15px arial;}
.eleman:nth-child(3){font:3px arial;}

Taşmaları kontrol etmek

Yukarda varsayılan olarak elemanlar kapsayıcı içerisinde bir satır boyunca konumlandırılır demiştik.

Kapsayıcıya yeni eleman eklendikçe elemanlar satır boyunca devam edecektir.

Eklenen elemanlar kapsayıcı genişliğini aştığında yeni satırda başlaması için flex-wrap özelliğini kullanılır.

Aldığı değerler;

  • nowrap: Elemanlar tek satırda soldan sağa sıralanır. (Varsayılan)
  • wrap: Elemanlar kapsayıcı genişliğini aştığında yeni satırda sıralanmaya başlar.
  • wrap-reverse: Elemanlar kapsayıcı genişliğini aştığında son eklenen eleman üst satırdan başlayarak sıralanmaya başlar.

Aşağıdaki örnekte nowrap değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  justify-content: space-around;
  flex-wrap: nowrap;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte wrap değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  justify-content: space-around;
  flex-wrap: wrap;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Aşağıdaki örnekte wrap-reverse değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  justify-content: space-around;
  flex-wrap: wrap-reverse;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Dikey hizalamak

Flex özelliği uygulanmış elemanları dikey olarak hizalamak için align-content özelliği kullanılır.

CSS align-items tek satır elemanları hizalar.

CSS flex-wrap özelliği kullanıldığında yani birden fazla satır olduğunda align-content özelliği kullanılır.

Yatay hizalama için kullanılan justify-content özelliğinin dikey olarak kullanılanıdır.

Aldığı değerler;

  • flex-start: Elemanlar kapsayıcının dikey olarak başından başlayarak hizalanır.
  • flex-end: Elemanlar kapsayıcının dikey olarak altından başlayarak hizalanır.
  • center: Elemanlar kapsayıcının dikey olarak ortasından başlayarak hizalanır.
  • space-between: Elemanlardan ilk kutu kapsayıcının başında, son kutu kapsayıcının sonunda dikey olacak şekilde eşit hizalar.
  • space-around: Elemanlar arası boşluk eşit olacak şekilde dikey olarak hizalanır.
  • stretch: Elemanları satır arasında boşluk kalmayacak şekilde dikeyde hizalar. (Varsayılan)

Aşağıdaki örnekte stretch değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  align-content: stretch;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 10px;
}

Aşağıdaki örnekte flex-start değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 10px;
}

Aşağıdaki örnekte flex-end değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  align-content: flex-end;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 10px;
}

Aşağıdaki örnekte center değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  align-content: center;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 10px;
}

Aşağıdaki örnekte space-between değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  align-content: space-between;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 10px;
}

Aşağıdaki örnekte space-around değeri kullanılmıştır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  align-content: space-around;
}

.eleman {
  background-color: #F1DA36;
  width: 100px;
  margin: 10px;
  padding: 10px;
}

Elemanları sıralamak

Varsayılan olarak flex uygulanmış elemanlar kod yazılış sırasına göre sıralanırlar.

Sıralamayı isteğe göre yapmak için order özelliği kullanılır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
}

.eleman {
  background-color: #F1DA36;
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 10px;
}
.eleman:nth-child(1){order:1;}
.eleman:nth-child(2){order:2;}
.eleman:nth-child(3){order:0;}

Dikey ve yatak ortalama

Flex uygulanmış elemanı dikey ve yatay olarak ortalamak için align-items, align-content ve justify-content özelliklerine center değerini vermek yeterli olacaktır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 400px;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.eleman {
  background-color: #F1DA36;
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Diğer bir yöntem ise margin değerinin auto yapılmasıdır.

.kapsayici {
  display: flex;
  background-color: #5d5d5d;
  height: 400px;
}

.eleman {
  background-color: #F1DA36;
  text-align: center;
  width: 100px;
  height: 100px;
  margin: auto;
}

Özel hizalama

Her bir elemanı özel olarak hizalamak için align-self özelliği kullanılır.

.kapsayici {
  display: flex;
  height: 200px;
  background-color: #5d5d5d;
}

.eleman {
  background-color: #F1DA36;
  text-align: center;
  width: 100px;
  margin: 10px;
  padding: 20px;
}

.eleman:nth-child(1){align-self: flex-start;}
.eleman:nth-child(2){align-self: flex-end;}
.eleman:nth-child(3){align-self: center;}
.eleman:nth-child(4){align-self: baseline;}
.eleman:nth-child(5){align-self: stretch;}

.

Genişlik belirleme

Taşıyıcı içindeki elemanların ne kadar yer kapsayacağı flex özelliği ile belirlenir.

Aşağıdaki örnekte ilk ve son eleman kapsayıcının 4’te 1’ini, ikinci eleman ise kapsayıcının 4’te 2’sini kapsayacaktır.

.kapsayici {
  display: flex;
  height: 200px;
  background-color: #5d5d5d;
}

.eleman {
  background-color: #F1DA36;
  text-align: center;
  width: 100px;
  margin: 10px;
  padding: 20px;
}

.eleman:nth-child(1){flex: 1}
.eleman:nth-child(2){flex: 2;}
.eleman:nth-child(3){flex: 1;}

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

8 Cevaplar

  1. Can dedi ki:

    kimse yorum atmamış emegine saglık çok güzel yazı olmuş on numara anlatım

  2. Murat dedi ki:

    Çok teşekürler büyük emek var.Umarım karşılığını görürsünüz.

  3. Kamil dedi ki:

    Emeğinize sağlık güzel paylaşım. Sormak istediğim şey ul li ile 10 tane kutu olduğunu varsayalım. Kutular 2 tane oldukça bir alt satırdan devam ediyor ve yüksekliği değişkenlik göstermekte. Yükseklik değişken olduğu için kutuların bazıları bir üst satırdaki sağdaki kutu biraz kısa ise alt satırda yeni başlayan kutu üst satırın sağındaki kutunun altına yerleşiyor ve kayma oluyor. Acaba her satırda iki kutunun yüksekliğini flex ile hangi kutu uzunsa diğeri onun kadar uzasın şeklinde bir özellik yapılabilir mi?

    • Yusuf SEZER dedi ki:

      CSS ile başka bir nesnenin/kutunun değerini alamıyoruz. Bundan dolayı CSS ile pek mümkün görünmüyor. JavaScript ile yapılabilir hatta bununla ilgili geniş seçeneği olan “masonry” bileşenini önerebilirim.

  4. Orhan dedi ki:

    Hocam teşekkürler güzel bir yazı olmuş. Bir de şu display: grid özelliği var onunla ilgili Türkçe kaynak bulamadım. Grid sistemi hakkında bilginiz varsa buradan paylaşmanız harika olur.

  5. Emre dedi ki:

    Nasıl responsive bir site yapabilirim diye arastırdım sürekli bootstrap geldi aklıma fakat css’de zayıf oldugmu görüp bunu geliştirmek istiyordum sizin yazınızı gördüm çok faydalı oldugunu düşünüyorum.Tesekkürler

  6. Eray dedi ki:

    Eline, emeğine sağlık…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir