Folyékony elrendezés: építési elvek és különbség az adaptívtól

Mi az a folyékony elrendezés

Folyékony elrendezés (liquid layout, fluid layout) — egy kódolási megközelítés, ahol az elemek méreteit relatív egységekben adjuk meg, nem fix pixelekben. Ez lehetővé teszi, hogy az oldal a böngészőablakkal együtt skálázódjön vízszintes görgetés nélkül.

A rugalmas kódolás koncepciója még a különböző felbontású asztali monitorok korszakában merült fel. A 2000-es években a 960 pixeles fix szélességű weboldalak rosszul néztek ki a 15 hüvelyk és 30 hüvelyk monitorokon. A folyékony elrendezés megoldotta ezt a problémát.

A Web Almanac (2024) szerint a modern weboldalak 78%-a használ rugalmas kódolási elemeket relatív egységeken keresztül. A tiszta folyékony elrendezések ritkábbak — főleg irányítópultokban és adminisztrációs panelekben.

Történelmi kontextus

Rugalmas kódolás John Allsopp «A Dao of Web Design» című cikkének 2000-es publikációja után vált népszerűvé, amelyben arra szólított fel, hogy hagyjuk el a fix pixeleket a relatív egységek javára. Ez a manifesztum filozófiai alapot teremtett az egész reszponzív design számára.

Relatív mértékegységek: százalékok, vw, vh

Az alapvető relatív egységek a CSS-ben két csoportra oszlanak: a szülőelemhez viszonyítva (százalékok) és a viewporthoz viszonyítva (vw, vh, vmin, vmax). Minden csoport a saját feladatait oldja meg a rugalmas kódolásban.

/* 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;
}

Százalékok a szülő konténer szélességéhez viszonyítva számítódnak. Az egymásba ágyazott százalékok kaszkád számításokat hozhatnak létre, amelyek néha váratlan eredményeket adnak. vw/vh egységek a viewporthoz vannak kötve és figyelmen kívül hagyják a szülő konténereket — ez kényelmes a teljes képernyős szekciók számára.

A rem egység betűtípusokhoz

A rugalmas kódolásban nem csak a blokkok szélességét fontos relatív egységekben megadni, hanem a betűméretet is. A rem (root em) egység a szöveg méretét a HTML gyökérelemhez köti. A html font-size módosításával az oldalon lévő összes szöveg skálázható.

/* 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 */
}

Folyékony vs adaptív elrendezés

A fő különbség a folyékony és adaptív elrendezés között a szélességváltozás jellege. A folyékony elrendezés folyamatosan változik az ablak bármilyen módosításakor, az adaptív pedig diszkréten, media queries segítségével.

Folyékony elrendezés — folyamatos skálázás, adaptív — váltás fix elrendezések között. Minden megközelítésnek vannak erősségei és gyengeségei.

A gyakorlatban a legtöbb modern weboldal hibrid megközelítést használ: rugalmas rács relatív egységekkel + media queries a kritikus töréspontokhoz. A tiszta rugalmas kódolás media queries nélkül rendetlenül nézhet ki nagyon széles vagy nagyon keskeny képernyőkön.

Hogyan valósítsuk meg a rugalmas kódolást CSS-ben

Az alap implementáció a folyékony elrendezéshez három összetevőt foglal magába: relatív szélességegységek, maximális/minimális korlátozások és flexbox vagy grid a tér elosztásához.

/* 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 megközelítés a flex: 1 1 30%-kal olyan kártyákat hoz létre, amelyek a konténer szélességének kb. 30%-át foglalják el, de 250px-ig összeszűkülhetnek. Amikor sok kártya van, átkerülnek a következő sorba. Grid megközelítés auto-fit és minmax segítségével automatikusan olyan oszlopokat hoz létre, amelyek beférnek a konténerbe.

Korlátozások: min-width és max-width

A kulcsprobléma a tiszta rugalmas kódolásban — nagyon széles képernyőkön a szövegsor 2000+ pixelre nyújlik, ami lehetetlenné teszi az olvasást. A megoldáshoz a CSS min-width és max-width tulajdonságait használják.

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

max-width: 1200px megakadályozza a tartalom széthúzódását ultrawide monitorokon. min-width: 320px garantálja a konténer minimális szélességét kis képernyőkön. A width: 90% + max-width kombináció egy plafonos rugalmas konténert hoz létre — a legnépszerűbb minta a modern webdesignban.

A HTTP Archive (2025) szerint a top-1000 weboldal 92%-a használ max-width-et tartalomblokkokhoz. A standard érték asztali elrendezésekhez 1140–1200 pixel.

Hibrid megközelítés: folyékony + adaptív

Modern webdesign ritkán használ tiszta folyékony vagy tiszta adaptív megközelítést. A hibrid módszer mindkettő előnyeit egyesíti: rugalmas rács relatív egységeken + media queries globális átszervezésekhez.

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

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

Asztali gépen az elrendezés 1fr és 3fr rugalmas oszlopokat használ — az arány az ablak bármilyen szélességénél megmarad. Mobil eszközökön a media query átvált egy oszlopos sémára, ahol az oszlopok függőlegesen helyezkednek el.

A hibrid megközelítés előnye — a fejlesztő kevesebb media query-t ír, mert a rugalmas rács automatikusan alkalmazkodik a köztes méretekhez. Media query-kre csak a struktúra kritikus változásaihoz van szükség, nem a képernyőszélesség minden lépéséhez.