Frontend Academy · Lektion

Display: grundlæggende block, inline, flex og grid

Skift mellem display-værdier, og se, hvordan block, inline, flex og grid hver især arrangerer indhold forskelligt.

Lektion 3 af 413 trin

Display: grundlæggende block, inline, flex og grid er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 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.

Egenskaben display

Egenskaben display er den vigtigste CSS-egenskab til layout. Den styrer, hvordan et element deltager i layoutforløbet, og hvordan dets underordnede elementer arrangeres. De mest anvendte værdier er: block, inline, inline-block, flex, grid og none.

display: block

Blokelementer optager den fulde bredde af deres container og begynder på en ny linje. Eksempler: <div>, <p>, <h1>. Du kan angive bredde, højde, margen og indvendig afstand for blokelementer.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Inline-elementer flyder sammen med teksten — de begynder ikke på en ny linje. Eksempler: <span>, <a>, <strong>. Bredde, højde og lodrette margener har ingen effekt på inline-elementer.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block kombinerer begge dele: elementet flyder inline (som tekst), men understøtter bredde, højde og lodret margen (som en blok). Det er nyttigt til knapper og mærkater, der skal stå på samme tekstlinje.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none fjerner elementet helt fra layoutet — det optager ingen plads. Brug visibility: hidden til at skjule det, mens det stadig optager den plads, det havde.

Flexbox — endimensionelt layout

display: flex gør et element til en flex-container. Dets direkte børn bliver flex-elementer, der arrangeres i en række (standard) eller kolonne. Flexbox er særligt velegnet til at fordele plads og justere elementer.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Vigtige Flexbox-egenskaber

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — todimensionelt layout

display: grid gør et element til en grid-container. Du definerer rækker og kolonner med grid-template-columns og grid-template-rows. Grid er ideelt til sidelayouts og gitterlayouts med kort.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Enheden fr

Enheden fr (brøkdel) fordeler den tilgængelige plads. grid-template-columns: 1fr 2fr 1fr opretter tre kolonner, hvor den midterste får dobbelt så meget plads som de andre.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Valg mellem Flexbox og Grid

Brug Flexbox til endimensionelle layouts (en række knapper, en stak kort). Brug Grid til todimensionelle layouts (en sides grundstruktur, et fotogalleri med eksplicitte rækker og kolonner). Begge kan bruges på samme side.

display: none vs visibility: hidden

display: none: fjerner elementet fra layoutet og gør det utilgængeligt for skærmlæsere. visibility: hidden: usynligt, men optager stadig plads og findes stadig i tilgængelighedstræet. opacity: 0: usynligt, men optager plads og er tilgængeligt.

Hurtig kontrol

Du skal opbygge et responsivt kortgitter med flere rækker og kolonner. Hvilken display-værdi er det bedste udgangspunkt?

Besvar den i den interaktive lektion

Opsummering: Display-værdier

block optager den fulde bredde. inline flyder sammen med teksten. inline-block kombinerer begge dele. flex arrangerer underordnede elementer i én dimension. grid arrangerer underordnede elementer i to dimensioner. none fjerner elementet fra layoutet. Når du behersker disse værdier, kan du styre alle layouts på nettet.

Gratis at komme i gang

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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Display: grundlæggende block, inline, flex og grid” gratis?

Ja — hele teksten til “Display: grundlæggende block, inline, flex og grid” 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 “Display: grundlæggende block, inline, flex og grid”?

Skift mellem display-værdier, og se, hvordan block, inline, flex og grid hver især arrangerer indhold forskelligt. 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 3 af 4.

Hvor lang tid tager lektionen “Display: grundlæggende block, inline, flex og grid”?

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

Selectors og kaskaden
Farver, typografi og box-modellen
Display: grundlæggende block, inline, flex og grid
Positionering: relative, absolute, fixed og sticky

← Tilbage til Frontend Academy