Akışkan düzen: yapım ilkeleri ve uyarlanabilir düzenden farkı

Akışkan düzen nedir

Akışkan düzen (liquid layout, fluid layout) — öğe boyutlarının sabit pikseller yerine göreceli birimlerle belirlendiği bir düzen yaklaşımıdır. Bu, sayfanın yatay kaydırma olmadan tarayıcı penceresiyle birlikte ölçeklenmesini sağlar.

Akışkan düzen kavramı, farklı çözünürlüklere sahip masaüstü monitörler döneminde ortaya çıktı. 2000'li yıllarda, 960 piksel sabit genişliğe sahip siteler 15 ve 30 inç monitörlerde kötü görünüyordu. Akışkan düzen bu sorunu çözdü.

Web Almanac (2024)'e göre, modern web sitelerinin %78'i göreceli birimler aracılığıyla akışkan düzen öğeleri kullanmaktadır. Saf akışkan düzenler daha az yaygındır — esas olarak panolar ve kontrol panellerinde.

Tarihsel bağlam

Akışkan düzen, John Allsopp'un 2000 yılında yayınlanan “A Dao of Web Design” makalesinden sonra popüler hale geldi ve burada sabit piksellerin terk edilip göreceli birimlerin kullanılması çağrısında bulundu. Bu manifesto, tüm duyarlı tasarımın felsefi temelini oluşturdu.

Göreceli ölçü birimleri: yüzde, vw, vh

CSS'teki ana göreceli birimler iki gruba ayrılır: üst öğeye göre (yüzde) ve viewport'a göre (vw, vh, vmin, vmax). Her grup, akışkan düzende kendi görevlerini çözer.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

Yüzdeler, üst kapsayıcının genişliğine göre hesaplanır. İç içe yüzdeler, bazen beklenmedik sonuçlar veren basamaklı hesaplamalar oluşturabilir. vw/vh birimleri viewport'a bağlıdır ve üst kapsayıcıları yok sayar — bu, tam ekran bölümler için kullanışlıdır.

Yazı tipleri için rem birimi

Akışkan düzende, yalnızca blok genişliklerini göreceli birimlerle belirlemek değil, aynı zamanda yazı tipi boyutunu da belirlemek önemlidir. rem birimi (root em), metin boyutunu kök HTML öğesine bağlar. html üzerinde font-size değiştirerek, sayfadaki tüm metni ölçekleyebilirsiniz.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

Akışkan vs uyarlanabilir düzen

Temel fark, akışkan ve uyarlanabilir düzen arasındaki genişlik değişiminin doğasıdır. Akışkan düzen, her pencere yeniden boyutlandırmasında sürekli olarak değişirken, uyarlanabilir düzen medya sorguları aracılığıyla ayrık olarak değişir.

Akışkan düzen sürekli ölçeklemedir, uyarlanabilir düzen ise sabit düzenler arasında geçiş yapmaktır. Her yaklaşımın güçlü ve zayıf yönleri vardır.

Uygulamada, çoğu modern web sitesi karma bir yaklaşım kullanır: göreceli birimlerle akışkan ızgara + kritik kesme noktaları için medya sorguları. Medya sorguları olmayan saf akışkan düzen, çok geniş veya çok dar ekranlarda dağınık görünebilir.

CSS'te akışkan düzen nasıl uygulanır

Temel uygulama üç bileşen içerir: göreceli genişlik birimleri, maksimum/minimum sınırlamalar ve alan dağıtımı için flexbox veya grid.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox yaklaşımı flex: 1 1 30% ile kapsayıcı genişliğinin yaklaşık %30'unu kaplayan ancak 250px'e kadar daralabilen kartlar oluşturur. Çok sayıda kart olduğunda, bir sonraki satıra geçerler. Grid yaklaşımı auto-fit ve minmax ile kapsayıcıya sığan sütunları otomatik olarak oluşturur.

Sınırlamalar: min-width ve max-width

Saf akışkan düzenin temel sorunu, çok geniş ekranlarda metin satırının 2000+ piksele kadar uzaması ve okumayı imkansız hale getirmesidir. CSS özellikleri min-width ve max-width bunu çözer.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px, ultra geniş monitörlerde içeriğin uzamasını önler. min-width: 320px, küçük ekranlarda kapsayıcının minimum genişliğini garanti eder. width: 90% + max-width kombinasyonu, tavanlı akışkan bir kapsayıcı oluşturur — modern web tasarımında en popüler desen.

HTTP Archive (2025)'e göre, ilk 1000'deki sitelerin %92'si içerik blokları için max-width kullanır. Masaüstü düzenler için standart değer 1140–1200 pikseldir.

Karma yaklaşım: akışkan + uyarlanabilir

Modern web tasarımı, saf akışkan veya uyarlanabilir yaklaşımları nadiren kullanır. Karma yöntem, her ikisinin avantajlarını birleştirir: göreceli birimlerle akışkan ızgara + küresel yeniden yapılandırmalar için medya sorguları.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Masaüstünde, düzen akışkan sütunlar 1fr ve 3fr kullanır — oran her pencere genişliğinde korunur. Mobilde, medya sorgusu sütunların dikey olarak istiflendiği tek sütunlu bir düzene geçer.

Karma yaklaşımın avantajı, geliştiricinin daha az medya sorgusu yazmasıdır, çünkü akışkan ızgara ara boyutlara otomatik olarak uyum sağlar. Medya sorguları yalnızca kritik yapısal değişiklikler için gereklidir, ekran genişliğinin her adımı için değil.