Vad är display: inline-flex

Flexbox har blivit en grundpelare i vardaglig webbdesign. Varje frontend-utvecklare känner till och använder display: flex. Men den här egenskapen har ett mindre känt syskon, display: inline-flex. Det skrivs sällan om och används ännu mer sällan. Det är ett misstag.

Skillnaden kan sammanfattas i en mening: inline-flex skapar en flexcontainer som själv beter sig som ett inline-element. Dess barn är vanliga flexobjekt med alla Flexbox-funktioner. Föräldern däremot tar inte upp hela den tillgängliga radbredden. Den anpassar sig efter sitt innehålls storlek och ligger på samma rad som intilliggande element.

Situationen är exakt som med paret display: block och display: inline-block. Ett blockelement tar upp hela raden, ett inline-element tar bara så mycket som innehållet kräver. Samma sak gäller här: flex skapar en flexcontainer på blocknivå, medan inline-flex skapar en på inline-nivå.

I praktiken öppnar detta upp för scenarier som skulle kräva extra omslag, breddhack eller float-reliker med vanlig flex.

💡 Snabb översikt:

• display: inline-flex skapar en flexcontainer som beter sig som ett inline-element och inte tar upp hela raden. Bredden på en sådan container bestäms av dess innehåll, inte dess förälder.
• Alla flex-egenskaper fungerar inuti inline-flex på exakt samma sätt som i vanlig display: flex. Det finns inga skillnader i hur barn layouteras; den enda skillnaden ligger i containerns yttre beteende.
• Det primära användningsområdet: badges, taggar och knappar med ikoner, där en enda inline-flex på elementet ersätter kombinationen av en flex-förälder och ett inline-barn. Du får innehållscentrering utan extra omslag.
• Andra display-värden har också inline-motsvarigheter: inline-block, inline-table och inline-grid fungerar enligt samma princip. Den interna layoutlogiken bevaras; endast containerns yttre beteende ändras.

Verkligt scenario: badges med ikoner

Föreställ dig en typisk uppgift. En sida behöver en rad med badges. Var och en har en ikon och text, där ikonen är centrerad vertikalt och horisontellt inuti en färgad cirkel. Själva badgesen ligger på en rad som vanlig text och bryts till nästa rad när de inte får plats.

Om du sätter display: flex på badgesen kommer var och en att sträcka sig till förälderns fulla bredd. Badgesen kommer att rada upp sig i en kolumn, inte en rad. Du kan fixa detta med ett omslag som har display: flex på föräldern. Men varför lägga till ett extra omslag när du har inline-flex?

HTML-strukturen är 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>

Notera att omslaget .badges-list inte gör något för inline-positioneringen. .c-badge sköter det själv.

CSS för badgen:

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

Det är allt. Varje badge är en flexcontainer med inline-beteende. Ikonen inuti centreras med justify-content och align-items. Själva badgesen radar upp sig på en rad och bryts till en ny rad när det inte finns tillräckligt med bredd. Exakt vad designen krävde, utan extra omslag.

Inline-flex vs flex: en visuell jämförelse

Det bästa sättet att förstå skillnaden är att titta på två identiska uppsättningar av containers, en med display: flex och den andra med display: inline-flex.

Exempel 1: display: flex

Tre föräldercontainers med blå bakgrund. Inuti var och en finns tre röda barn med flex: 1. Föräldrarna har display: flex.

Resultat: varje blå container tar upp hela raden. Barnen inuti sträcker sig till lika bredd. Containrarna är staplade i en kolumn, en under den andra.

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

Exempel 2: display: inline-flex

Samma tre containers, men med display: inline-flex. Barnen har fått min-width: 50px tillagt så att containern inte kollapsar till noll.

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

Resultat: containrarna ligger på en enda rad. Var och en tar upp exakt så mycket bredd som dess barn behöver (50px × 3 = 150px). De beter sig som ord i en mening och bryts till nästa rad endast när utrymmet tar slut.

Den viktigaste insikten: för flexobjekt inuti containern finns det ingen skillnad alls. Egenskaper som justify-content och align-items, liksom gap och flex-direction, fungerar identiskt. Den enda skillnaden är hur containern själv interagerar med omvärlden: som ett block eller som ett inline-element.

När ska man använda inline-flex: 4 scenarier

Alla layouter kräver inte inline-flex. Men det finns situationer där det löser uppgiften mer elegant än kombinationen flex + omslag.

1. En lista med taggar eller badges. Det vanligaste användningsfallet. Varje tagg är en flexcontainer med en ikon och text centrerad. Själva taggarna flyter på en rad med radbrytning. inline-flex på taggen, och inga omslag behövs.

2. Knappar med ikoner i en textrad. När en åtgärdsknapp (kopiera, öppna, ta bort) ligger direkt inuti ett stycke eller en rubrik. inline-flex låter dig centrera ikonen inuti knappen utan att dra ut knappen ur textflödet.

3. Ett inline-verktygsfält. En uppsättning formateringsknappar i en WYSIWYG-redigerare. Varje knapp är en inline-flex-container med en ikon inuti. Alla knappar ligger på en rad och bryts naturligt.

4. Vertikal centrering i ett inline-sammanhang. En klassisk CSS-smärtpunkt: att centrera en ikon vertikalt i förhållande till intilliggande text. vertical-align: middle fungerar sporadiskt. inline-flex med align-items: center fungerar varje gång.

Här är koden för scenarierna 2 och 3, så att de inte förblir teoretiska.

Knapp med ikon i text (scenario 2). Anta att du behöver en "kopiera"-knapp inuti ett stycke. Den måste stanna i textflödet och inte bryta raden. Här är den minimala 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 rader flexbox-centrering, och ikonen inuti knappen är justerad på båda axlarna. Inga line-height-hack, ingen position: relative plus transform. Knappen ligger direkt i texten som ett annat ord.

Verktygsfält (scenario 3). En typisk WYSIWYG-redigerare: knappar för fetstil, kursiv och länk ligger på en rad. Varje knapp är en inline-flex-container:

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
}

Knapparna bryts när fönstret smalnar av, utan ytterligare omslag. För förälderns verktygsfält fungerar display: flex med flex-wrap: wrap och gap: 4px bra. Du får en flex-komposition på två nivåer: den yttre containern hanterar raden av knappar, och varje knapp centrerar sin ikon.

Fallgropar med inline-flex

Tre icke-uppenbara situationer som sparar timmar i DevTools.

Mellanrum mellan element. Liksom inline-block är element med inline-flex känsliga för mellanrum i HTML. Tre <span>-element med inline-flex på separata rader kommer att ha ett mellanrum på 4-5 pixlar. Lösningen: font-size: 0 på föräldern med återställning på barnen, ta bort mellanrum mellan taggar, eller en kombination av display: flex på föräldern plus inline-flex på barnen.

text-align fungerar inte på flex-barn. För inline-block justeras element via text-align: center på föräldern. Med inline-flex fungerar denna teknik bara så länge barnen inte själva har blivit flexcontainers. Flexobjekt svarar inte på text-align. Justera containers via justify-content på en flex-förälder eller margin: auto.

Standard flex-riktning. inline-flex, liksom display: flex, layouterar barn i en rad som standard (flex-direction: row). Om du förväntar dig en kolumn inuti en inline-container, sätt flex-direction: column explicit. Specifikationen läser inte utvecklarens tankar.

Släktingar: andra inline display-varianter

inline-flex har konceptuella syskon. Nästan varje block-display-värde har en inline-motsvarighet:

Mekanismen är densamma överallt: den interna layoutlogiken är helt bevarad, endast containerns yttre beteende ändras. Med inline-grid är historien densamma: en grid-container som ligger på en rad istället för att ta upp förälderns fulla bredd.

I praktiken används inline-flex oftare än inline-grid. Anledningen är enkel: flexcontainers behövs oftare för små komponenter (badge, knapp, ikongrupp), där inline-beteende är precis vad som behövs. Grid-layouter tillämpas oftare på stora strukturella block, där inline-beteende inte fyller något syfte.

Webbläsarstödet för inline-flex är praktiskt taget komplett. Egenskapen dök upp i specifikationen Flexible Box Layout Module Level 1 (W3C Candidate Recommendation, 2016) och fungerar i alla moderna webbläsare: Chrome sedan version 29 (2013), Firefox sedan version 20 (2013), Safari sedan version 9 (2015) och Edge sedan version 12 (2015). Internet Explorer 11 stöder inline-flex med förbehåll, men enligt data från StatCounter för 2025 är IE11:s andel mindre än 0,1% av den globala marknaden. För projekt som måste stödja IE11, testa inline-flex manuellt: denna webbläsare beter sig oförutsägbart med vissa flex-basis- och min-height-buggar.

⁉️🤔 Vanliga frågor

Vad är skillnaden mellan display: inline-flex och display: flex?

display: flex skapar en flexcontainer på blocknivå som tar upp hela den tillgängliga radbredden. display: inline-flex skapar en flexcontainer på inline-nivå vars bredd bestäms av dess innehåll och kan ligga på samma rad som andra element. För barn inuti containern finns det ingen skillnad: alla flex-egenskaper fungerar likadant i båda fallen.

När är inline-flex bättre än inline-block?

inline-block ger dig ingen kontroll över barns justering. Om du behöver centrera en ikon inuti en knapp både vertikalt och horisontellt, kommer inline-block att tvinga dig att komma ihåg line-height-hack och vertical-align. inline-flex med justify-content: center och align-items: center gör detta utan krångel.

Kan man använda gap med inline-flex?

Ja, gap fungerar i inline-flex på exakt samma sätt som i vanlig flex. Du anger avståndet mellan flexobjekt, och webbläsaren tillämpar det oavsett om containern är på blocknivå eller inline-nivå. Stöd för gap i flexbox: alla moderna webbläsare sedan 2021.

Påverkar inline-flex nästlade flexcontainers?

Nej. Egenskapen display ärvs inte. Om ett element med display: flex ligger inuti en inline-flex-container kommer det att vara en vanlig flexcontainer på blocknivå. Inline-beteende gäller endast det element du uttryckligen sätter inline-flex på.

*inline-flex** och tillgänglighet: finns det några fallgropar?*

Skärmläsare gör ingen skillnad mellan flex och inline-flex. Båda värdena påverkar endast visuell layout och ändrar inte semantik eller läsordning. Flex-egenskapen order ändrar den visuella ordningen men inte ordningen i tillgänglighetsträdet; detta gäller för båda display-värdena.

Vad ska man använda: flex eller inline-flex

Valet kokar ner till en enkel fråga: ska containern ligga på en rad med sina grannar eller ta upp hela sin förälders bredd?

Om du stylar en komponent (badge, knapp med ikon, tagg, verktygsfältsknapp), använd inline-flex. Du får flex-centrering av innehåll samtidigt som du bevarar naturligt inline-beteende utan extra omslag.

Om du stylar en sektion, ett kort, sidhuvud, sidfot eller layout, håll dig till display: flex. Blockbeteende är lämpligt här: containern ska ta upp sin rad, inte klämma in sig mellan intilliggande element.

Den gyllene regeln: öppna DevTools och titta på elementet. Om det ligger på en rad med andra, använd inline-flex. Om det ligger på en egen rad, använd flex. Så enkelt är det.