WEB TASARIM KURSU : CSS FLEX KULLANIMI

CSS Flexbox Kullanımı

CSS Flexbox, öğeleri yatay veya dikey eksende hizalamak ve yerleştirmek için kullanılan bir düzen modelidir. Esnek yapısı sayesinde, öğeler arası boşlukların kontrolü, hizalama ve taşma durumları kolaylıkla yönetilebilir.

Flexbox Sistemine Giriş

Flexbox kullanımı için önce bir kapsayıcı (container) tanımlanır. Bu kapsayıcıya display: flex özelliği verilerek içindeki öğeler esnek kutulara (flex items) dönüşür.

Flex Kapsayıcı Tanımı

Bir elementi flex kapsayıcı yapmak için aşağıdaki yapılar kullanılır:

HTML:

<div class="kapsayici">
  <div>Öğe 1</div>
  <div>Öğe 2</div>
  <div>Öğe 3</div>
</div>

CSS:

.kapsayici {
  display: flex;
}

Flex Container (Kapsayıcı) Özellikleri

1. flex-direction

Öğelerin yerleşim yönünü belirler.

  • row: Öğeler yatay sırayla soldan sağa dizilir.
  • row-reverse: Yatay dizilim sağdan sola olur.
  • column: Öğeler dikey olarak yukarıdan aşağıya sıralanır.
  • column-reverse: Dikey dizilim aşağıdan yukarıya olur.

2. flex-wrap

Öğelerin tek satıra mı sığdırılacağı yoksa satır taşmasına mı izin verileceğini belirler.

  • nowrap: Tüm öğeler tek satırda kalır (varsayılan).
  • wrap: Öğeler sığmazsa alt satıra geçer.
  • wrap-reverse: Alt satıra geçerken ters yönde sıralanır.

3. justify-content

Öğelerin ana eksen boyunca hizalanmasını kontrol eder.

  • flex-start: Öğeler baştan hizalanır.
  • flex-end: Öğeler sondan hizalanır.
  • center: Öğeler ortalanır.
  • space-between: İlk ve son öğe kenarlara yaslanır, aradakiler eşit boşlukla yerleştirilir.
  • space-around: Tüm öğelerin etrafında eşit boşluk olur.
  • space-evenly: Tüm boşluklar eşit şekilde dağıtılır.

4. align-items

Çapraz eksen boyunca öğelerin hizalanmasını sağlar.

  • stretch: Öğeler kapsayıcıya dik eksende uzatılır.
  • flex-start: Öğeler çapraz eksenin başına hizalanır.
  • flex-end: Öğeler çapraz eksenin sonuna hizalanır.
  • center: Öğeler ortalanır.
  • baseline: Öğeler yazı satırına göre hizalanır.

5. align-content

Çok satırlı yerleşimlerde, satırlar arasındaki hizalamayı belirler.

Kabul edilen değerler: flex-start, flex-end, center, space-between, space-around, stretch

Flex Item (Çocuk Öğeler) Özellikleri

1. flex-grow

Öğelerin artan boş alanı hangi oranda paylaşacağını belirler.

  • 0: Öğe boş alanı büyütmez.
  • 1: Öğe mevcut boşluk kadar genişler.

2. flex-shrink

Öğelerin küçülmeye ne kadar izin verdiğini belirtir.

  • 1: Öğe daraltılabilir.
  • 0: Öğe daralmaz.

3. flex-basis

Bir öğenin başlangıç genişliğini veya yüksekliğini belirler.

  • auto: Varsayılan değerdir.
  • Belirli bir değer (örneğin 200px) verilebilir.

4. flex

flex-grow, flex-shrink ve flex-basis özelliklerinin kısa yoldan yazımıdır.

Örnek: flex: 1 1 200px;

5. align-self

Sadece ilgili öğe için hizalama yapılmasını sağlar. Diğer öğelerden bağımsız olarak konumlanır.

Kabul edilen değerler: auto, flex-start, flex-end, center, baseline, stretch

Flexbox'ın Avantajları

  • Karmaşık yapılar olmadan hizalama kolaylığı sağlar.
  • Responsive tasarımlar için idealdir.
  • Öğeler arası boşlukları eşit şekilde dağıtmak mümkündür.
  • Öğelerin sıraya göre yön değiştirmesi hızlıdır.

Sonuç

Flexbox, modern CSS ile gelen güçlü bir yerleşim modelidir. Öğeleri hizalamak, aralarında boşluk bırakmak ve düzenli yerleşim sağlamak için kullanılır. Web tasarımında sıkça karşılaşılan düzen problemlerine sade ve etkili çözümler sunar.

Telefon
Whatsapp