Flexbox i dybden: justering, ombrydning og rækkefølge
Bliv fortrolig med justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis og egenskaben order.
Flexbox i dybden: justering, ombrydning og rækkefølge er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Gennemgang: Flex-container og flex-elementer
Opsummering: display: flex på containeren opretter flex-elementer ud fra de direkte underordnede elementer. Hovedaksen løber langs flex-direction. Tværaksen står vinkelret på den.
justify-content-værdier i detaljer
Alle justify-content-værdier i en container med rækkeorientering: flex-start (standard), flex-end, center, space-between (kun mellemrum mellem elementerne), space-around (lige stor margen rundt om hvert element) og space-evenly (lige store mellemrum overalt).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items kontra align-content
align-items justerer elementer på en enkelt linje. align-content justerer flere linjer og fungerer kun, når flex-wrap er wrap, og der er flere linjer.
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self på individuelle elementer
align-self tilsidesætter align-items for et bestemt flex-element. Det er nyttigt, hvis ét element skal strækkes, mens de andre centreres.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap og wrap-reverse
flex-wrap: wrap lader elementer flyde over på nye linjer. wrap-reverse ombryder elementerne, men i den modsatte retning. Kombinér det med gap for at oprette enkle responsive gitre.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink og flex-basis
Den tredelte flex-kortform på elementer. flex-grow: andelen af den tilgængelige plads. flex-shrink: hvor hurtigt elementet formindskes, når pladsen er trang. flex-basis: den oprindelige størrelse før forøgelse eller formindskelse.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Almindelige flex-kortformer
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (optager dobbelt så meget plads som flex: 1).
Egenskaben order
order ændrer flex-elementernes visuelle rækkefølge uden at ændre HTML. Standardværdien er 0. Negative værdier vises før 0. Brug den med omtanke — forskelle mellem den visuelle rækkefølge og DOM-rækkefølgen kan forvirre brugere af tastaturer og skærmlæsere.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 som løsning på overflow
Flex-elementer har implicit min-width: auto, hvilket betyder, at de ikke formindskes til under størrelsen på deres indhold. Angiv min-width: 0 for at give dem mulighed for at blive mindre — det er nødvendigt for at afkorte tekst i flex-elementer.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Flex-mellemrum uden gap
I ældre miljøer uden understøttelse af gap kan du bruge margen på elementerne og negativ margen på containeren til at oprette mellemrum. I dag understøttes gap dog i alle moderne browsere — foretræk det.
Indlejrede flex-containere
Ethvert flex-element kan selv være en flex-container. Indlejr Flexbox for at oprette komplekse layouts: en række kort, hvor indholdet i hvert kort også er arrangeret med flex. Det er det normale mønster i moderne layouts.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Hurtigt tjek
Hvilken egenskab fordeler pladsen mellem flex-elementer langs tværaksen, når flex-wrap er wrap?
Opsummering: Flexbox i dybden
justify-content fordeler pladsen langs hovedaksen. align-items bruges til tværaksen på en enkelt linje. align-content bruges til tværaksen på flere linjer. align-self justerer individuelle elementer. flex-wrap: wrap aktiverer flere linjer. Flex-kortformen styrer forøgelse, formindskelse og basisstørrelse. order ændrer den visuelle rækkefølge. min-width: 0 forhindrer problemer med formindskelse.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Flexbox i dybden: justering, ombrydning og rækkefølge” gratis?
Ja — hele teksten til “Flexbox i dybden: justering, ombrydning og rækkefølge” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Flexbox i dybden: justering, ombrydning og rækkefølge”?
Bliv fortrolig med justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis og egenskaben order. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Flexbox i dybden: justering, ombrydning og rækkefølge”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Flexbox i dybden: justering, ombrydning og rækkefølge
- CSS Grid: template-areas auto-fit minmax
- Kombination af Flexbox og Grid
- CSS-variabler til tematisering