CSS Academy · leksjon

Mønstre for flex-forkortelse

Bli fortrolig med flex-forkortelsen, og forstå vanlige verdier som flex: 1, flex: none og flex: auto.

Leksjon 3 av 413 trinn

Mønstre for flex-forkortelse er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 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 CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Kortformen flex på nytt

Kortformen flex angir flex-grow, flex-shrink og flex-basis i én deklarasjon. Det er viktig å forstå variantene av kortformen for å kunne lage oppsett i den virkelige verden.

flex: 1

flex: 1 tilsvarer flex: 1 1 0%. Elementene starter med null basis og vokser likt for å fylle den tilgjengelige plassen. Dette er den vanligste kortformen for kolonner med lik bredde.

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

flex: auto = flex: 1 1 auto. Elementene starter med sin naturlige innholdsstørrelse og vokser eller krymper deretter proporsjonalt. Bredere innhold får mer plass når elementene vokser.

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

flex: none = flex: 0 0 auto. Elementet er fast – det vokser eller krymper ikke. Størrelsen bestemmes av den naturlige bredden på innholdet eller av en eksplisitt bredde/høyde.

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

Et element med fast størrelse som ikke er fleksibelt. Dette er den mest eksplisitte måten å opprette sidepaneler med nøyaktig bredde på:

<div class="layout">
  <div class="sidebar-left">Left</div>
  <div class="main-content">Main</div>
  <div class="sidebar-right">Right</div>
</div>

flex: 1 kontra flex: 1 1 auto

Den viktigste forskjellen er at med flex: 1 (basis 0 %) starter alle elementene på 0 og vokser proporsjonalt. Med flex: 1 1 auto starter elementene med sin naturlige innholdsstørrelse og vokser deretter. Dette påvirker hvordan den gjenværende plassen fordeles.

Forholdet flex: 2

Bruk ulike flex-grow-verdier for proporsjonal fordeling:

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

Kombinere faste og fleksible elementer

Det vanligste mønsteret i den virkelige verden er et fast sidepanel sammen med fleksibelt hovedinnhold:

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

flex-trikset min-width: 0

Flex-elementer har som standard min-width: auto. Dette kan hindre dem i å krympe til mindre enn innholdsstørrelsen. Angi min-width: 0 for elementer som skal kunne krympe fritt, for eksempel tekstbeholdere med forkorting.

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

Kortnett-rutenett

Responsivt kortnett med fleksible, men avgrensede kort:

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Feilsøking av kortformen flex

Bruk nettleserens DevTools til å inspisere de beregnede verdiene for flex-grow, flex-shrink og flex-basis. Flexbox-inspektørens overlegg viser også ledig plass og elementstørrelser visuelt.

Hurtigsjekk

Hva utvides flex: auto til?

Besvar den i den interaktive leksjonen

Oppsummering

Husk de viktigste flex-kortformene: flex: 1 (like kolonner fra null), flex: auto (vokser fra naturlig størrelse), flex: none (fast) og flex: 0 0 Xpx (fast størrelse). Bruk min-width: 0 på flex-underelementer som inneholder tekst med forkorting. Kombiner faste og fleksible elementer for klassiske sidepaneloppsett.

Gratis å komme i gang

Lær deg CSS 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: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mønstre for flex-forkortelse» gratis?

Ja – hele teksten i «Mønstre for flex-forkortelse» 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 CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Mønstre for flex-forkortelse»?

Bli fortrolig med flex-forkortelsen, og forstå vanlige verdier som flex: 1, flex: none og flex: auto. Du øver på 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 CSS Academy?

Ingen tidligere erfaring er nødvendig. 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 3 av 4.

Hvor lang tid tar leksjonen «Mønstre for flex-forkortelse»?

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 CSS Academy-leksjonen?

Ja. Alle 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

Overstyre justering av flex-elementer med align-self
Order-egenskapen og visuell omorganisering
Mønstre for flex-forkortelse
Vanlige Flexbox-oppsett: navigasjon, kort og medieobjekter

← Tilbake til CSS Academy