Justere innhold og elementer
Plasser underordnede elementer langs hovedaksen med justify-* og langs kryssaksen med items-* for å oppnå vanlige layoutmønstre.
Justere innhold og elementer er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Flex-justeringens to akser
Justering i Flexbox skjer langs to vinkelrette akser. Hovedaksen går i retningen til flex-row (vannrett) eller flex-col (loddrett). Tverraksen står vinkelrett på hovedaksen. justify-* styrer justering langs hovedaksen. items-* styrer justering langs tverraksen. Å forstå dette skillet er nøkkelen til å mestre flex-layout.
justify-content: Plassering langs hovedaksen
justify-*-hjelpeklassene tilsvarer CSS-egenskapen justify-content. I en flex-rad styrer de vannrett plassering av gruppen med elementer. justify-start samler elementene til venstre (standard). justify-end samler dem til høyre. justify-center sentrerer gruppen. justify-between fordeler elementene med lik plass mellom dem. justify-around legger til lik plass rundt hvert element. justify-evenly fordeler plassen jevnt, også ved kantene.
<div class="flex justify-start gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-center gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-between bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-end gap-2 bg-gray-100 p-4"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>justify-between: Plassfordeleren
justify-between er en av de mest brukte flex-hjelpeklassene. Den plasserer det første elementet ved starten av beholderen, det siste ved slutten, og fordeler eventuelle resterende elementer med lik plass mellom seg. Dette er standardmønsteret for navigasjonslinjer (logo til venstre, lenker til høyre), kort (ikon til venstre, handling til høyre) og alle komponenter der elementene skal fylle hele bredden med plass mellom seg.
<!-- Navbar with justify-between -->
<div class="flex items-center justify-between px-6 py-4 bg-white shadow">
<span class="font-bold text-indigo-600">Logo</span>
<button class="bg-indigo-600 text-white text-sm px-4 py-2 rounded">Sign Up</button>
</div>
<!-- Card footer with actions -->
<div class="flex items-center justify-between pt-4 border-t">
<span class="text-sm text-gray-500">Last updated: Today</span>
<button class="text-indigo-600 text-sm font-medium">Edit</button>
</div>align-items: Plassering langs tverraksen
items-*-hjelpeklassene tilsvarer CSS-egenskapen align-items og styrer hvordan elementer plasseres på tverraksen. I en flex-rad styrer dette den loddrette justeringen. items-start justerer mot toppen. items-end justerer mot bunnen. items-center sentrerer alle elementene loddrett. items-stretch (standard) strekker elementene slik at de fyller høyden til beholderen. items-baseline justerer tekstens grunnlinjer.
<!-- All four items-* values demonstrated in a row -->
<div class="flex items-start h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-blue-400 p-2 text-sm">Start</div>
</div>
<div class="flex items-center h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-green-400 p-2 text-sm">Center</div>
</div>
<div class="flex items-end h-24 gap-4 bg-gray-100 p-4">
<div class="bg-red-400 p-2 text-sm">End</div>
</div>items-center: Den mest brukte justeringen
items-center brukes i nesten alle flex-rader fordi den sentrerer alle barna loddrett, uavhengig av deres individuelle høyde. Ikoner, tekst og knapper — selv når de har ulik størrelse — justeres langs de loddrette midtpunktene sine. Dette gjør at navigasjonslinjer, listeelementer og bunntekster i kort ser gjennomarbeidede ut uten manuelle høydejusteringer.
<!-- Icon + text + badge: all different heights, all centered -->
<div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50">
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold">
JD
</div>
<div>
<p class="font-medium text-gray-900">Jane Doe</p>
<p class="text-xs text-gray-500">Product Designer</p>
</div>
<span class="ml-auto bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full">
Active
</span>
</div>items-baseline for tekstjustering
items-baseline justerer elementene slik at tekstens grunnlinjer (den nederste delen av store bokstaver) ligger på linje. Dette er nyttig når De blander ulike skriftstørrelser på en rad — for eksempel et stort pristall ved siden av et mindre valutasymbol eller en enhetsetikett. Uten grunnlinjejustering kan de ulike størrelsene se ubalanserte ut; med den danner de en visuelt helhetlig gruppe.
<!-- Price with currency and period aligned on baseline -->
<div class="flex items-baseline gap-1">
<span class="text-sm font-medium text-gray-500">$</span>
<span class="text-4xl font-extrabold text-gray-900">49</span>
<span class="text-sm font-medium text-gray-500">/month</span>
</div>Kombinere justify og items
Den virkelige styrken ligger i å kombinere justify-* og items-*. Det klassiske flex items-center justify-center sentrerer innholdet langs begge aksene samtidig. flex items-center justify-between fordeler elementene vannrett samtidig som de holdes loddrett sentrert — standardmønsteret for navigasjonslinjer. Tenk på dette som å styre to uavhengige akser samtidig.
<!-- Perfect vertical and horizontal centering -->
<div class="min-h-screen flex items-center justify-center">
<p class="text-2xl font-bold">Dead center</p>
</div>
<!-- Navbar pattern -->
<nav class="flex items-center justify-between px-8 h-16 bg-white border-b">
<span class="font-bold">Brand</span>
<button class="text-sm font-medium text-indigo-600">Login</button>
</nav>align-self: Overstyring for enkeltstående elementer
Mens items-* justerer alle barna likt, overstyrer self-*-hjelpeklasser justeringen for ett enkelt flex-element. self-start, self-end, self-center, self-stretch og self-baseline fungerer på samme måte som de tilsvarende items-*-klassene, men gjelder for elementet de er skrevet på, i stedet for alle barna. Bruk dette for å trekke ett element ut av gruppens justering.
<!-- Most items centered, but one aligned to the top -->
<div class="flex items-center gap-4 bg-gray-100 p-4 h-24">
<div class="self-start bg-indigo-400 p-3">Top</div>
<div class="bg-green-400 p-3">Middle</div>
<div class="bg-blue-400 p-3">Middle</div>
</div>justify-items i Grid (ikke Flex)
Ikke forveksle justify-content (for flex-beholdere) med justify-items (for grid-beholdere). I Tailwind styrer justify-* justify-content på flex-beholdere. For CSS Grid bruker De justify-items-* og place-items-*. Disse styrer hvordan grid-barna plasseres i sine individuelle gridceller, i stedet for hvordan gridsporene fordeles.
<!-- Flex: justify-between distributes the group -->
<div class="flex justify-between">
<div>A</div><div>B</div><div>C</div>
</div>
<!-- Grid: justify-items centers each item within its cell -->
<div class="grid grid-cols-3 justify-items-center">
<div>A</div><div>B</div><div>C</div>
</div>align-content for flex med flere linjer
Når flex-elementer brytes over flere linjer (ved hjelp av flex-wrap), styrer content-*-hjelpeklassene justeringen av hele gruppen med linjer. content-center sentrerer alle linjene som en gruppe i beholderen. content-between fordeler linjene med plass mellom dem. Dette gjelder samlingen av rader (eller kolonner), ikke individuelle elementer.
<!-- Multi-line flex with content alignment -->
<div class="flex flex-wrap content-center gap-4 bg-gray-100 h-64 p-4">
<div class="bg-blue-400 p-4 rounded">A</div>
<div class="bg-blue-400 p-4 rounded">B</div>
<div class="bg-blue-400 p-4 rounded">C</div>
<div class="bg-blue-400 p-4 rounded">D</div>
<div class="bg-blue-400 p-4 rounded">E</div>
</div>Praktisk: Rad med funksjonskort
En rad med funksjonskort bruker ofte flex items-start (slik at kort med ulik høyde justeres fra toppen) kombinert med gap-6. Hvert kort bruker internt flex flex-col, slik at en «Les mer»-lenke nederst kan skyves dit med mt-auto. Denne kombinasjonen skaper et profesjonelt funksjonsoppsett der alle kortene starter på samme loddrette posisjon.
<div class="flex items-start gap-6">
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-indigo-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm flex-1">Lightning-fast builds with the JIT engine.</p>
<a href="#" class="mt-4 text-indigo-600 text-sm font-medium">Learn more →</a>
</div>
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-green-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Flexible</h3>
<p class="text-gray-500 text-sm flex-1">Customize every aspect with the config.</p>
<a href="#" class="mt-4 text-green-600 text-sm font-medium">Learn more →</a>
</div>
</div>Hurtigsjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: justify-* styrer justeringen langs hovedaksen (horisontalt i flex-row), items-* styrer justeringen langs tverraksen (vertikalt i flex-row), og kombinasjonen flex items-center justify-between er standardmønsteret for navigasjonsfelt. Deretter skal vi styre hvordan flex-underelementer vokser og krymper, med flex-grow-, flex-shrink- og basis-verktøy.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Justere innhold og elementer» gratis?
Ja – hele teksten i «Justere innhold og elementer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Justere innhold og elementer»?
Plasser underordnede elementer langs hovedaksen med justify-* og langs kryssaksen med items-* for å oppnå vanlige layoutmønstre. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Justere innhold og elementer»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Aktivere flex og retning
- Justere innhold og elementer
- Flex-utvidelse, -krymping og -basis
- Linjebryting og mellomrom