Yüzdelerle Akışkan Genişlikler
Kapsayıcılarıyla birlikte ölçeklenen düzenler oluşturmak için yüzde tabanlı genişlikler kullanın.
Yüzdelerle Akışkan Genişlikler, 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.
Akışkan Genişlikler Neden Kullanılır?
Pixellerle belirlenen sabit genişlikli düzenler, sabit boyuttan daha dar ekranlarda bozulur. Yüzdeleri kullanan akışkan genişlikler, düzenlerin herhangi bir kapsayıcı veya görünüm alanı boyutuna orantılı olarak ölçeklenmesini sağlar.
Yüzde Genişliğinin Temelleri
Yüzde cinsinden genişlik, üst kapsayıcının genişliğine göre belirlenir. width: 50% değerine sahip bir alt öğe, her zaman üst kapsayıcısının genişliğinin yarısı kadar olur.
<div style="width:300px;border:1px dashed #999;padding:4px;">
<div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
<div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>Yüzde ve Kutu Boyutlandırma
box-sizing: border-box kullanıldığında yüzde genişlikleri dolgu ve kenarlığı içerir. Bu, yüzde sütunlarını kolaylaştırır; dolgu miktarından bağımsız olarak 50% gerçekten yarı genişliktir.
<div style="width:300px;border:1px dashed #999;">
<div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>Akışkan İki Sütunlu Düzen
float tabanlı (eski) basit bir akışkan düzen:
<div style="width:100%;overflow:auto;">
<div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
<div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>Akışkan Flexbox Sütunları
Akışkan sütun düzenleri için Flexbox kullanmak daha temiz bir yaklaşımdır:
<div class="flex-row">
<div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
<div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>Yüzde Dolgu
Yüzde cinsinden dolgu, üst ve alt dolgu için bile her zaman üst kapsayıcının genişliğine göre belirlenir (yüksekliğine göre değil). Bu, en-boy oranı hilelerine olanak tanır:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Modern En-Boy Oranı
aspect-ratio özelliği, en-boy oranlarını korumak için kullanılan dolgu hilesinin yerini alır:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Akışkan Düzenle max-width
Yüzde genişliklerini max-width ile birleştirmek, büyük ekranlarda satırların fazla genişlemesini önler:
<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>Yüzde Yüksekliğinin Sakıncası
Yüzde cinsinden yükseklik, üst kapsayıcının tanımlanmış bir yüksekliğe sahip olmasını gerektirir. Üst kapsayıcının height: auto değeri varsa alt öğelerdeki yüzde yükseklikleri de auto olarak hesaplanır.
İçsel Boyutlandırma Anahtar Sözcükleri
Modern CSS, daha akışkan boyutlandırma seçenekleri sunar:
min-content: içeriği sığdıran en küçük boyutmax-content: tüm içeriği tek satıra sığdıran boyutfit-content: min-content ile max-content arasında
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>Akışkan Izgara Deseni
inline-block (eski) veya modern CSS kullanan yaygın bir akışkan ızgara:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
<div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>Hızlı Kontrol
Bir üst öğe 600px genişliğindedir. Bir alt öğede width: 60% ve padding: 20px (box-sizing: border-box) bulunmaktadır. Alt öğenin içerik genişliği nedir?
Özet
Yüzde genişlikleri, üst kapsayıcılarıyla birlikte ölçeklenen akışkan düzenler oluşturur. Aşırı geniş içeriği önlemek için max-width ile birlikte kullanın. Duyarlı medya için aspect-ratio kullanın. Flexbox ve Grid, akışkan sütunları yüzde tabanlı kayan sütunlardan daha zarif biçimde yönetir.
Sıkça Sorulan Sorular
“Yüzdelerle Akışkan Genişlikler” dersi ücretsiz mi?
Evet — “Yüzdelerle Akışkan Genişlikler” 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.
“Yüzdelerle Akışkan Genişlikler” dersinde ne öğreneceğim?
Kapsayıcılarıyla birlikte ölçeklenen düzenler oluşturmak için yüzde tabanlı genişlikler kullanı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.
“Yüzdelerle Akışkan Genişlikler” 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
- Mobil Öncelikli ve Masaüstü Öncelikli Yaklaşım
- Yüzdelerle Akışkan Genişlikler
- Min-Width ve Max-Width Kalıpları
- Duyarlı Görseller ve Picture Öğesi