CSS Academy · Ders

Justify-Content ve Align-Items

justify-content ve align-items kullanarak öğeleri ana ve çapraz eksen boyunca dağıtın.

Justify-Content ve Align-Items, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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.

İki Temel Hizalama Özelliği

En sık kullanılan iki flex hizalama özelliği şunlardır:

justify-content — öğeleri ana eksen boyunca hizalar
align-items — öğeleri çapraz eksen boyunca hizalar

justify-content: flex-start

flex-start (varsayılan), öğeleri ana eksenin başlangıcına doğru toplar. row yönünde öğeler sola hizalanır.

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

justify-content: center

Öğeleri ana eksen boyunca ortalar. Flexbox ile yatay hizalama için kullanılan klasik tekniktir.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Öğeleri ana eksenin sonuna doğru toplar (row yönünde sağ tarafa).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Öğeler arasında eşit boşluk dağıtır. İlk öğe başlangıçta, son öğe sondadır; kenarlarda boşluk bulunmaz.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Her öğenin çevresine eşit boşluk yerleştirir. Kenardaki öğeler, iç boşlukların yarısı kadar boşluk alır. Görsel olarak kenarlardaki iç boşluk, öğeler arasındaki boşluğun yarısı kadardır.

justify-content: space-evenly

Kenarlar da dahil tüm boşluklar eşittir. space-around değerinden farklı olarak kenar iç boşlukları, öğeler arasındaki boşluklara eşittir.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (Varsayılan)

stretch (varsayılan), tüm flex öğelerinin çapraz eksende kapsayıcının çapraz boyutunu doldurmasını sağlar. Bir satır kapsayıcısındaki tüm öğeler aynı yüksekliğe sahip olur.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Öğeleri çapraz eksende ortalar. Bir satır kapsayıcısında öğeler dikey olarak ortalanır. Bu, klasik dikey hizalama çözümüdür.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start ve flex-end

flex-start, öğeleri çapraz eksenin başlangıç kenarına hizalar (satır yönünde üst kenara). flex-end, öğeleri çapraz eksenin son kenarına hizalar (satır yönünde alt kenara).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Öğeleri, metin taban çizgileri hizalanacak şekilde hizalar. Öğelerin yazı tipi boyutları farklı olduğunda ancak görsel olarak hizalı görünmeleri gerektiğinde kullanışlıdır.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Hızlı Kontrol

Bir flex öğesini kapsayıcısı içinde hem yatay hem de dikey olarak tam ortalayan birleşim hangisidir?

Özet

justify-content, flex-start, center ve space-between gibi değerlerle öğeleri ana eksen boyunca dağıtır. align-items, stretch, center ve flex-start değerleriyle öğeleri çapraz eksende konumlandırır. Birlikte, her iki eksendeki hizalamayı denetlerler.

Sıkça Sorulan Sorular

“Justify-Content ve Align-Items” dersi ücretsiz mi?

Evet — “Justify-Content ve Align-Items” 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.

“Justify-Content ve Align-Items” dersinde ne öğreneceğim?

justify-content ve align-items kullanarak öğeleri ana ve çapraz eksen boyunca dağıtın. 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 2. dersidir.

“Justify-Content ve Align-Items” 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