Hva er display: inline-flex

Flexbox har blitt en grunnpilar i daglig weblayout. Alle frontend-utviklere kjenner til og bruker display: flex. Men denne egenskapen har en mindre kjent slektning, display: inline-flex. Det skrives sjelden om den og brukes enda sjeldnere. Det er en feil.

Forskjellen kan oppsummeres i én setning: inline-flex oppretter en flex-beholder som selv oppfører seg som et inline-element. Dens barn er vanlige flex-elementer med alle mulighetene til Flexbox. Beholderen tar imidlertid ikke opp hele den tilgjengelige bredden på linjen. Den tilpasser seg størrelsen på innholdet og sitter på samme rad som naboelementer.

Situasjonen er nøyaktig som med paret display: block og display: inline-block. Et blokkelement tar opp hele linjen, et inline-element tar bare så mye som innholdet trenger. Det samme gjelder her: flex setter opp en flex-beholder på blokknivå, mens inline-flex setter opp en på inline-nivå.

I praksis åpner dette for scenarier som ville krevd ekstra wrappere, breddehack eller float-levninger med vanlig flex.

💡 Rask oversikt:

• display: inline-flex oppretter en flex-beholder som oppfører seg som et inline-element og ikke tar opp hele linjen. Bredden på en slik beholder bestemmes av innholdet, ikke av forelderen.
• Alle flex-egenskaper fungerer inni inline-flex på nøyaktig samme måte som i vanlig display: flex. Det er ingen forskjeller i hvordan barn legges ut; den eneste forskjellen er i beholderens ytre oppførsel.
• Det primære bruksområdet: merker, tagger og knapper med ikoner, der en enkelt inline-flex på elementet erstatter kombinasjonen av en flex-forelder og et inline-barn. Du får innholdssentrering uten ekstra wrappere.
• Andre display-verdier har også inline-motstykker: inline-block, inline-table og inline-grid fungerer etter samme prinsipp. Den interne layoutlogikken bevares; bare beholderens ytre oppførsel endres.

Praktisk eksempel: merker med ikoner

Se for deg en typisk oppgave. En side trenger en rad med merker. Hvert av dem har et ikon og tekst, der ikonet er sentrert vertikalt og horisontalt inni en farget sirkel. Selve merkene sitter på en linje som vanlig tekst og bryter til neste linje når de ikke får plass.

Hvis du setter display: flex på merkene, vil hvert av dem strekke seg til full bredde av forelderen. Merkene vil stille seg opp i en kolonne, ikke en rad. Du kan fikse dette med en wrapper som har display: flex på forelderen. Men hvorfor legge til en ekstra wrapper når du har inline-flex?

HTML-strukturen er elementær:

1
<div class="badges-list">
2
  <span class="c-badge">
3
    <svg class="c-icon" width="24" height="24">...</svg>
4
  </span>
5
  <span class="c-badge">
6
    <svg class="c-icon" width="24" height="24">...</svg>
7
  </span>
8
  <!-- other badges -->
9
</div>

Merk at wrapperen .badges-list ikke gjør noe for inline-posisjonering. .c-badge håndterer det selv.

CSS for merket:

1
.c-badge {
2
  display: inline-flex;
3
  justify-content: center;
4
  align-items: center;
5
}

Det er alt. Hvert merke er en flex-beholder med inline-oppførsel. Ikonet inni er sentrert ved hjelp av justify-content og align-items. Selve merkene stiller seg opp på rad og bryter til ny linje når det ikke er nok bredde. Nøyaktig hva designet krevde, uten ekstra wrappere.

Inline-flex vs flex: en visuell sammenligning

Den beste måten å forstå forskjellen på er å se på to identiske sett med beholdere, ett med display: flex og det andre med display: inline-flex.

Eksempel 1: display: flex

Tre forelderbeholdere med blå bakgrunn. Inni hver av dem er det tre røde barn med flex: 1. Foreldrene har display: flex.

Resultat: hver blå beholder tar opp hele linjen. Barna inni strekker seg til lik bredde. Beholderne er stablet i en kolonne, én under den andre.

1
.container--flex {
2
  display: flex;
3
}
4
 
5
.container--flex > div {
6
  flex: 1;
7
}

Eksempel 2: display: inline-flex

De samme tre beholderne, men med display: inline-flex. Barna har fått lagt til min-width: 50px slik at beholderen ikke kollapser til null.

1
.container--inline-flex {
2
  display: inline-flex;
3
}
4
 
5
.container--inline-flex > div {
6
  flex: 1;
7
  min-width: 50px;
8
}

Resultat: beholderne sitter på én enkelt rad. Hver av dem tar opp nøyaktig så mye bredde som barna trenger (50px × 3 = 150px). De oppfører seg som ord i en setning og bryter til neste linje først når plassen tar slutt.

Hovedpoenget: for flex-elementer inni beholderen er det overhodet ingen forskjell. Egenskaper som justify-content og align-items, samt gap og flex-direction, fungerer identisk. Den eneste forskjellen er hvordan beholderen selv samhandler med omverdenen: som et blokk- eller som et inline-element.

Når du bør bruke inline-flex: 4 scenarier

Ikke alle layouter krever inline-flex. Men det finnes situasjoner der det løser oppgaven mer elegant enn kombinasjonen flex + wrapper.

1. En liste med tagger eller merker. Det vanligste bruksområdet. Hver tagg er en flex-beholder med et ikon og tekst justert i midten. Selve taggene flyter på en linje med linjebryting. inline-flex på taggen, og ingen wrappere er nødvendig.

2. Knapper med ikoner i en tekstlinje. Når en handlingsknapp (kopier, åpne, slett) sitter direkte inni et avsnitt eller en overskrift. inline-flex lar deg sentrere ikonet inni knappen uten å trekke knappen ut av tekstflyten.

3. En inline verktøylinje. Et sett med formateringsknapper i en WYSIWYG-editor. Hver knapp er en inline-flex-beholder med et ikon inni. Alle knappene sitter på en linje og brytes naturlig.

4. Vertikal sentrering i en inline-kontekst. Et klassisk CSS-problem: å sentrere et ikon vertikalt i forhold til tilstøtende tekst. vertical-align: middle fungerer sporadisk. inline-flex med align-items: center fungerer hver gang.

Her er koden for scenario 2 og 3, så de ikke forblir teoretiske.

Knapp med ikon i tekst (scenario 2). Anta at du trenger en "kopier"-knapp inni et avsnitt. Den må forbli i tekstflyten og ikke bryte linjen. Her er den minimale CSS-en:

1
.inline-action-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 24px;
6
  height: 24px;
7
  border: none;
8
  background: transparent;
9
  cursor: pointer;
10
  vertical-align: middle;
11
}

Tre linjer med flexbox-sentrering, og ikonet inni knappen er justert på begge akser. Ingen line-height-hack, ingen position: relative pluss transform. Knappen sitter rett i teksten som et hvilket som helst annet ord.

Verktøylinje (scenario 3). En typisk WYSIWYG-editor: knapper for fet, kursiv og lenke sitter på en rad. Hver knapp er en inline-flex-beholder:

1
.toolbar__btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 32px;
6
  height: 32px;
7
  border-radius: 4px;
8
}

Knappene brytes når vinduet smalner, uten ekstra wrappere. For forelder-verktøylinjen fungerer display: flex med flex-wrap: wrap og gap: 4px godt. Du får en to-nivås flex-komposisjon: den ytre beholderen håndterer raden med knapper, og hver knapp sentrerer sitt ikon.

Fallgruver med inline-flex

Tre ikke-åpenbare situasjoner som sparer timer i DevTools.

Mellomrom mellom elementer. I likhet med inline-block er elementer med inline-flex følsomme for mellomrom i HTML. Tre <span>-elementer med inline-flex på separate linjer vil ha et gap på 4-5 piksler. Løsningen: font-size: 0 på forelderen med gjenoppretting på barna, fjerning av mellomrom mellom tagger, eller en kombinasjon av display: flex på forelderen pluss inline-flex på barna.

text-align fungerer ikke på flex-barn. For inline-block justeres elementer via text-align: center på forelderen. Med inline-flex fungerer denne teknikken bare så lenge barna ikke selv har blitt flex-beholdere. Flex-elementer responderer ikke på text-align. Juster beholdere via justify-content på en flex-forelder eller margin: auto.

Standard flex-retning. inline-flex legger, i likhet med display: flex, ut barn på rad som standard (flex-direction: row). Hvis du forventer en kolonne inni en inline-beholder, sett flex-direction: column eksplisitt. Spesifikasjonen leser ikke utviklerens tanker.

Slektninger: andre inline display-varianter

inline-flex har konseptuelle søsken. Nesten hver blokk-display-verdi har et inline-motstykke:

Mekanismen er den samme overalt: den interne layoutlogikken er fullstendig bevart, bare beholderens ytre oppførsel endres. Med inline-grid er historien den samme: en grid-beholder som sitter på en rad i stedet for å ta opp hele bredden av forelderen.

I praksis brukes inline-flex oftere enn inline-grid. Årsaken er enkel: flex-beholdere trengs oftere for små komponenter (merke, knapp, ikongruppe), der inline-oppførsel er akkurat det som trengs. Grid-layouter brukes oftere på store strukturelle blokker, der inline-oppførsel ikke tjener noen hensikt.

Nettleserstøtten for inline-flex er praktisk talt komplett. Egenskapen dukket opp i Flexible Box Layout Module Level 1-spesifikasjonen (W3C Candidate Recommendation, 2016) og fungerer i alle moderne nettlesere: Chrome siden versjon 29 (2013), Firefox siden versjon 20 (2013), Safari siden versjon 9 (2015) og Edge siden versjon 12 (2015). Internet Explorer 11 støtter inline-flex med forbehold, men ifølge data fra StatCounter for 2025 er IE11-andelen mindre enn 0,1% av det globale markedet. For prosjekter som må støtte IE11, test inline-flex manuelt: denne nettleseren oppfører seg uforutsigbart med enkelte flex-basis- og min-height-feil.

⁉️🤔 Ofte stilte spørsmål

Hva er forskjellen mellom display: inline-flex og display: flex?

display: flex oppretter en flex-beholder på blokknivå som tar opp hele den tilgjengelige bredden på linjen. display: inline-flex oppretter en flex-beholder på inline-nivå hvis bredde bestemmes av innholdet og som kan sitte på samme linje som andre elementer. For barn inni beholderen er det ingen forskjell: alle flex-egenskaper fungerer likt i begge tilfeller.

Når er inline-flex bedre enn inline-block?

inline-block gir deg ingen kontroll over barnas justering. Hvis du trenger å sentrere et ikon inni en knapp både vertikalt og horisontalt, vil inline-block tvinge deg til å huske line-height-hack og vertical-align. inline-flex med justify-content: center og align-items: center gjør dette uten krumspring.

Kan du bruke gap med inline-flex?

Ja, gap fungerer i inline-flex på nøyaktig samme måte som i vanlig flex. Du angir avstanden mellom flex-elementer, og nettleseren bruker den uavhengig av om beholderen er på blokknivå eller inline-nivå. Støtte for gap i flexbox: alle moderne nettlesere siden 2021.

Påvirker inline-flex nestede flex-beholdere?

Nei. Egenskapen display arves ikke. Hvis et element med display: flex er inni en inline-flex-beholder, vil det være en vanlig flex-beholder på blokknivå. Inline-oppførsel gjelder bare for elementet du eksplisitt setter inline-flex på.

*inline-flex** og tilgjengelighet: er det noen fallgruver?*

Skjermlesere skiller ikke mellom flex og inline-flex. Begge verdiene påvirker bare visuell layout og endrer ikke semantikk eller leserekkefølge. Flex-egenskapen order endrer den visuelle rekkefølgen, men ikke rekkefølgen i tilgjengelighetstreet; dette gjelder for begge display-verdiene.

Hva du bør bruke: flex eller inline-flex

Valget koker ned til et enkelt spørsmål: skal beholderen sitte på en linje med sine naboer eller ta opp hele bredden av sin forelder?

Hvis du styler en komponent (merke, knapp med ikon, tagg, verktøylinjeelement), bruk inline-flex. Du får flex-sentrering av innhold samtidig som du bevarer naturlig inline-oppførsel uten ekstra wrappere.

Hvis du styler en seksjon, et kort, topptekst, bunntekst eller layout, hold deg til display: flex. Blokkoppførsel er passende her: beholderen skal ta opp sin egen linje, ikke presse seg inn mellom naboelementer.

Den gylne regelen: åpne DevTools og se på elementet. Hvis det er på en linje med andre, bruk inline-flex. Hvis det er på sin egen linje, bruk flex. Så enkelt er det.