CSS3 flexbox Esnek Kutu Kullanımı

CSS3 ile birlikte gelen esnek kutular veya flex, yeni yerleşim biçimidir.

Flex, esnek kutu modeli sunduğundan dolayı farklı ekran boyutlarında farklı bir görüntü vermesini kolay şekilde sağlayabiliriz. Böylece responsive(duyarlı) web tasarıma geçiş daha kolaylaşacaktır.

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 parçaları taşıyan bir taşıyıcı tanımlamamız gerekiyor. CSS display özelliğine flex(blok olarak) veya inline-flex(satır olarak) değerini vererek tanımlamayabiliriz.

Kapsayıcı içerisinde birden fazla parça bulunabilir.

NOT: Kapsayıcı elemana tanımlanan display:flex özelliğiyle sadece taşıyıcıya esneklik kazandırdık böylece alt elemanları kapsayıcı içerisinde kolay bir şekilde konumlandırabiliriz.

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 direction özelliğiyle hem flex uygulanmış elemanları hem de yazıların hangi yönde başlayacağını belirleyebiliyoruz.

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

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

Yön belirlemek flex-direction

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

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

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. CSS flex-direction özelliği kullanılmadığında varsayılandır.

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

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

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 justify-content

Flex özelliği uygulanmış elemanları yatay olarak hizalamak için CSS justify-content özelliğini kullanabiliriz.

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 align-items

Flex özelliği uygulanmış elemanları dikey olarak hizalamak için CSS align-items özelliğini kullanabiliriz.

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ı 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;}

Eleman taşmalarını kontrol etmek flex-wrap

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 bir satır boyunca devam edecektir.

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

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 align-content

Flex özelliği uygulanmış elemanları dikey olarak hizalamak için CSS align-content özelliğini kullanabiliriz.

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 CSS 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 order

Varsayılan olarak flex uygulanmış elemanlar kod yazılış sırasına göre sıralanırlar. CSS order özelliği sayesinde bu sıralamayı kendimiz belirleyebiliriz.

.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 verdiğimizde dikey ve yatay olarak hizalanacaktı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 CSS margin değerini auto yapmamız yeterli olacaktır.

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

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

Özel hizalama align-self

Bazen her bir elaman için farklı hizalama uygulamak isteyebiliriz. Bunun için CSS align-self özelliğini kullanabiliriz.

.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 flex

CSS3 flex uygulanmış elemanların kapsayıcı içerisinde ne kadar yer kaplayacağını flex özelliği ile belirleyebiliriz.

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

6 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.

Bir Cevap Yazın

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