CSS Academy · Ders

Display Flex ve Flex Direction

Bir kapsayıcıda flexbox'ı etkinleştirin ve ana eksen yönünü flex-direction ile denetleyin.

Display Flex ve Flex Direction, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Flexbox'ı Etkinleştirme

Flexbox, bir kapsayıcı öğe ( flex kapsayıcısı ) üzerinde display: flex ayarlanarak etkinleştirilir. Doğrudan alt öğeleri otomatik olarak flex öğeleri olur.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Satır İçi Flex

display: inline-flex, blok olarak değil satır içinde (inline-block gibi) akan bir flex kapsayıcısı oluşturur. İç flexbox davranışı aynıdır.

<p>Status: <span class="badge">🔥 Trending</span></p>

Ana Eksen ve Çapraz Eksen

Flexbox'ın iki ekseni vardır:

Ana eksen: öğelerin yerleştirildiği temel yön
Çapraz eksen: ana eksene dik yön

Tüm flex özellikleri sabit yönlere değil, bu eksenlere başvurur.

flex-direction: row (Varsayılan)

Varsayılan yön row'dur: öğeler yatay ana eksen boyunca soldan sağa yerleştirilir.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column, öğeleri dikey olarak üst üste dizer. Ana eksen dikey, çapraz eksen ise yatay olur.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse yatay yönü tersine çevirir: öğeler sağdan sola yerleştirilir. Ana eksenin başlangıcı sağdadır.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse, öğeleri aşağıdan yukarıya dizer. Son öğe en üstte görünür.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction Tüm Flex Özelliklerini Etkiler

flex-direction değerini değiştirdiğinizde justify-content yönü de değişir. Yön column ise justify-content, yatay değil dikey eksen boyunca hizalama yapar.

Basit Yatay Düzen

Flexbox'ın en basit kullanım alanı — bir gezinme menüsündeki öğeleri ortalamak:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Basit Dikey Düzen

Bir kartın içeriğini hem dikey hem de yatay olarak ortalamak:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

flex-flow Kısa Yazımı

flex-flow, flex-direction ve flex-wrap özelliklerinin kısa yazımıdır:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Hızlı Kontrol

flex-direction: column ayarlandığında justify-content hangi ekseni denetler?

Özet

Alt öğeleri için bir flex bağlamı oluşturmak üzere bir kapsayıcıda display: flex ayarlayın. flex-direction, ana eksenin yönünü belirler: row (yatay) veya column (dikey). Tüm flex hizalama özellikleri sabit sol/sağ/yukarı/aşağı yönlerine değil, bu eksenlere göredir.

Sıkça Sorulan Sorular

“Display Flex ve Flex Direction” dersi ücretsiz mi?

Evet — “Display Flex ve Flex Direction” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Display Flex ve Flex Direction” dersinde ne öğreneceğim?

Bir kapsayıcıda flexbox'ı etkinleştirin ve ana eksen yönünü flex-direction ile denetleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Display Flex ve Flex Direction” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön