Layout
Display, flexbox, grid, gap, container Tailwind class-ekkel.
Layout
Display
A leggyakrabban használt display értékek Tailwind class-ként:
<div class="block">...</div> <!-- display: block -->
<div class="inline">...</div> <!-- display: inline -->
<div class="inline-block">...</div>
<div class="flex">...</div> <!-- display: flex -->
<div class="inline-flex">...</div>
<div class="grid">...</div> <!-- display: grid -->
<div class="hidden">...</div> <!-- display: none -->Flexbox
A flex layout az egyik leggyakrabban használt layout rendszer. Tailwind-ben úgy működik, mint a natív CSS flexbox – csak class-ekkel vezérled.
Alap flexbox:
<div class="flex items-center justify-between gap-4">
<span>Bal oldal</span>
<span>Jobb oldal</span>
</div>Flex irányok:
<div class="flex flex-row">...</div> <!-- vízszintes (alapértelmezett) -->
<div class="flex flex-col">...</div> <!-- függőleges -->
<div class="flex flex-row-reverse">...</div>
<div class="flex flex-col-reverse">...</div>Igazítás a cross axis mentén (align-items):
<div class="flex items-start">...</div> <!-- felülre igazít -->
<div class="flex items-center">...</div> <!-- középre igazít -->
<div class="flex items-end">...</div> <!-- alulra igazít -->
<div class="flex items-stretch">...</div> <!-- nyújtja (alapértelmezett) -->Igazítás a main axis mentén (justify-content):
<div class="flex justify-start">...</div> <!-- balra -->
<div class="flex justify-center">...</div> <!-- középre -->
<div class="flex justify-end">...</div> <!-- jobbra -->
<div class="flex justify-between">...</div> <!-- szélekre, közte egyenlő rés -->
<div class="flex justify-around">...</div> <!-- egyenlő rés mindkét oldalon -->
<div class="flex justify-evenly">...</div> <!-- teljesen egyenletes elosztás -->Flex gyerekek méretezése:
<div class="flex">
<div class="flex-1">Ez kitölti a maradék helyet</div>
<div class="w-48">Ez fix széles (192px)</div>
</div>flex-1→flex: 1 1 0%– rugalmasan kitölti a teretflex-auto→flex: 1 1 auto– a tartalom mérete alapján indulflex-none→flex: none– nem rugalmas, megtartja méretétflex-initial→ alapértelmezett flex viselkedés
Flex wrap:
<div class="flex flex-wrap gap-2">
<!-- az elemek sortöréskor új sorba kerülnek -->
</div>Grid
A CSS grid komplex, kétdimenziós layoutokhoz ideális.
Alapvető grid:
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Grid oszlopok:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Responsive grid: 1 → 2 → 4 oszlop -->
</div>Elem kiterjedése (span):
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Ez 2 oszlopot foglal el</div>
<div class="col-span-1">Egy oszlop</div>
<div class="col-span-1">Egy oszlop</div>
</div>Sorok száma:
<div class="grid grid-rows-3 grid-flow-col gap-4">
<!-- Sorok szerint tölt fel, nem oszlopok szerint -->
</div>Gap és space
A gap a flex és grid containereknek való – a gyerekek közötti teret szabályozza:
<div class="flex gap-4">...</div> <!-- 16px gap minden irányban -->
<div class="grid gap-x-8 gap-y-4">...</div> <!-- vízszintes és függőleges gap külön -->A space utility gyerekek közé tesz margint – Tailwind v4-ben a gap az ajánlott megoldás, a space-x/y egyre ritkábban szükséges:
<!-- Régebbi minta (v3-ban volt népszerű): -->
<div class="flex space-x-4">...</div>
<!-- Modern, ajánlott minta: -->
<div class="flex gap-4">...</div>Container
A container class egy block-level elemet hoz létre, amelynek max-width-je a jelenlegi breakpointhoz igazodik:
<div class="container mx-auto px-4">
<!-- tartalom -->
</div>A mx-auto horizontálisan középre rendezi. A px-4 megakadályozza, hogy a tartalom közvetlenül az ablak széléhez érjen kis képernyőn.
Összefoglaló
A layout Tailwind-del flexbox és grid class-ek kombinálásával épül fel. A
flex+items-center+justify-betweenkombináció az egyik leggyakrabban használt pattern. Responsive layout-hoz breakpoint prefixeket használunk (pl.md:grid-cols-2).