Yusuf SEZER

CSS3 flexbox Esnek Kutu Kullanımı

Paylaş
Facebook
Linkedin
X

CSS3 ile birlikte gelen flex flexbox veya esnek kutular özelliğinin kullanımı sayfa içindeki elemanların yön, hizalama işlemlerinin nasıl yapılacağı ile ilgili bilgiler yer almakta.

flex nedir

CSS3 ile birlikte gelen flex sayfa içindeki elemanların kolayca yerleştirilmesi için kullanılan bir özelliktir.

Flex, flexbox veya esnek kutu kullanımı için öncelikle elemanları taşıyan bir taşıyıcının tanımlanması gerekir.

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

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

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

Varsayılan olarak elemanlar kapsayıcı içerisinde bir satır boyunca yerleştirilir.

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;
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 10px;
}

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

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

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

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

Varsayılan olarak elemanlar kapsayıcı içerisinde bir satır boyunca yerleştirilir 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;}

CSS3 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook
Linkedin
X
WhatsApp
Telegram
E-Posta ile paylaş
Yazdır

Bunlarda ilgini çekebilir

WhatsApp topluluğuna katıl.