CSS Academy · Ders

align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma

align-self kullanarak tek tek flex ögeleri için kapsayıcının align-items değerini geçersiz kılın.

1. ders / 413 adım

align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma, 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.

align-self Nedir?

align-self, belirli bir esnek öğe için esnek kapsayıcının align-items ayarını geçersiz kılar. Kapsayıcıya değil, tek tek öğelere uygulanır.

align-self Değerleri

align-items ile aynı değerleri kabul eder:

auto — kapsayıcının align-items değerini devralır (varsayılan)
flex-start — çapraz eksenin başlangıcına hizalar
flex-end — çapraz eksenin sonuna hizalar
center — çapraz eksende ortalar
stretch — çapraz eksen boyutunu dolduracak şekilde uzatır
baseline — metin taban çizgilerini hizalar

Uygulamalı Örnek

Öğelerin çoğunun ortalandığı, ancak son düğmenin sona hizalandığı bir gezinme çubuğu:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Tek Bir Öğeyi Uzatma

Diğerleri içeriğe göre küçülürken bir kartın tam yüksekliğe kadar uzamasını sağlayın:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

Hizalama için margin: auto

Esnek öğelerdeki otomatik kenar boşlukları, kendilerini (veya kardeş öğeleri) karşı tarafa iter. Bu, öğeleri ortalamak veya alanı dağıtmak için align-self özelliğine güçlü bir alternatiftir.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

Dikey Ortalamada margin: auto

Otomatik kenar boşlukları dikey olarak da çalışır. Sütun yönündeki bir esnek kapsayıcı içinde margin-top: auto kullanmak, bir öğeyi alta iter:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Taban Çizgisi Hizalaması

Öğeleri metin taban çizgisine göre hizalamak, farklı boyutlardaki öğeler arasındaki okunabilir ilişkileri korur:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (Varsayılan)

align-self: auto, öğeye kapsayıcının align-items değerini kullanmasını söyler. align-self özelliğini yalnızca kapsayıcının varsayılanından sapmak istediğinizde ayarlamanız gerekir.

Çapraz Eksen ve Ana Eksen

Unutmayın: align-self her zaman çapraz eksen üzerinde çalışır. flex-direction: column kullanıldığında çapraz eksen yataydır; bu nedenle align-self sağa ve sola konumlandırmayı denetler.

align-self ile flex-grow Birlikte Kullanımı

Yaygın bir kalıp: bir öğeyi alanı dolduracak şekilde büyütmek AND çapraz eksen hizalamasını geçersiz kılmak:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Izgara ve Esnek Kutu Hizalaması

CSS Grid, 2B denetim için hem align-self (satır ekseni) hem de justify-self (sütun ekseni) özelliklerine sahiptir. Esnek kutu düzenindeki align-self yalnızca çapraz ekseni denetler; ana eksen için margin: auto kullanın.

Hızlı Kontrol

Bir esnek kapsayıcıda align-items: center ayarlanmıştır. Bir öğenin çapraz eksenin üstüne hizalanması gerekiyor. Bu öğede hangi özelliği ayarlamalısınız?

İnteraktif derste cevapla

Özet

align-self, tek tek öğeler için esnek kapsayıcının align-items değerini geçersiz kılar. Belirli öğelerin hizalama düzeninden ayrılmasını sağlamak için kullanın. margin: auto, kalan alanı dağıtarak öğeleri her iki eksen boyunca iten tamamlayıcı bir araçtır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma” dersi ücretsiz mi?

Evet — “align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma” 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.

“align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma” dersinde ne öğreneceğim?

align-self kullanarak tek tek flex ögeleri için kapsayıcının align-items değerini geçersiz kılı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 1. dersidir.

“align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma” 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

align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma
order Özelliği ve Görsel Yeniden Sıralama
Flex Kısa Gösterim Kalıpları
Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi

← CSS Academy Sayfasına Dön