Mitä on display: inline-flex

Flexboxista on tullut jokapäiväisen web-asettelun peruspilari. Jokainen front-end-kehittäjä tuntee ja käyttää display: flex -arvoa. Tällä ominaisuudella on kuitenkin vähemmän tunnettu sisarus, display: inline-flex. Siitä kirjoitetaan harvoin ja sitä käytetään vielä harvemmin. Se on virhe.

Ero tiivistyy yhteen lauseeseen: inline-flex luo flex-säiliön, joka itse käyttäytyy kuin inline-elementti. Sen lapset ovat tavallisia flex-alkioita, joilla on kaikki Flexboxin ominaisuudet. Vanhempi ei kuitenkaan vie rivin koko käytettävissä olevaa leveyttä. Se mukautuu sisältönsä koon mukaan ja asettuu samalle riville viereisten elementtien kanssa.

Tilanne on täsmälleen sama kuin parilla display: block ja display: inline-block. Block-elementti vie koko rivin, inline-elementti vain sen verran kuin sisältö tarvitsee. Sama pätee tässä: flex luo block-tason flex-säiliön, kun taas inline-flex luo inline-tason sellaisen.

Käytännössä tämä avaa skenaarioita, jotka vaatisivat ylimääräisiä wrapper-elementtejä, leveyskikkoja tai float-jäänteitä tavallisen flex-arvon kanssa.

💡 Nopea yleiskatsaus:

• display: inline-flex luo flex-säiliön, joka käyttäytyy kuin inline-elementti eikä vie koko riviä. Tällaisen säiliön leveys määräytyy sen sisällön, ei sen vanhemman, mukaan.
• Kaikki flex-ominaisuudet toimivat inline-flex-arvon sisällä täsmälleen samalla tavalla kuin tavallisessa display: flex -arvossa. Lasten asettelussa ei ole eroja; ainoa ero on säiliön ulkoisessa käyttäytymisessä.
• Ensisijainen käyttötapaus: merkit, tunnisteet ja painikkeet, joissa on kuvakkeita, joissa yksittäinen inline-flex elementissä korvaa flex-vanhemman ja inline-lapsen yhdistelmän. Saat sisällön keskityksen ilman ylimääräisiä wrapper-elementtejä.
• Muilla display-arvoilla on myös inline-vastineensa: inline-block, inline-table ja inline-grid toimivat samalla periaatteella. Sisäinen asettelulogiikka säilyy; vain säiliön ulkoinen käyttäytyminen muuttuu.

Tosielämän tapaus: merkit, joissa on kuvakkeita

Kuvittele tyypillinen tehtävä. Sivulla tarvitaan rivi merkkejä. Jokaisessa on kuvake ja tekstiä, ja kuvake on keskitetty pysty- ja vaakasuunnassa värillisen ympyrän sisällä. Itse merkit asettuvat riville kuten tavallinen teksti ja rivittyvät seuraavalle riville, kun ne eivät mahdu.

Jos asetat merkkeihin display: flex -arvon, jokainen niistä venyy vanhempansa koko leveyteen. Merkit asettuvat sarakkeeseen, eivät riville. Voit korjata tämän wrapper-elementillä, jossa on display: flex vanhemmassa. Mutta miksi lisätä ylimääräinen wrapper, kun sinulla on inline-flex?

HTML-rakenne on alkeellinen:

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>

Huomaa, että wrapper .badges-list ei tee mitään inline-sijoittelun eteen. .c-badge hoitaa sen itse.

CSS merkille:

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

Siinä kaikki. Jokainen merkki on flex-säiliö, jolla on inline-käyttäytyminen. Sisällä oleva kuvake keskitetään käyttämällä justify-content- ja align-items-ominaisuuksia. Itse merkit asettuvat riviin ja rivittyvät uudelle riville, kun leveys ei riitä. Juuri sitä, mitä suunnittelu vaati, ilman ylimääräisiä wrapper-elementtejä.

Inline-flex vs flex: visuaalinen vertailu

Paras tapa ymmärtää ero on katsoa kahta identtistä säiliösarjaa, joista toisessa on display: flex ja toisessa display: inline-flex.

Esimerkki 1: display: flex

Kolme vanhempaa säiliötä sinisellä taustalla. Jokaisen sisällä on kolme punaista lasta, joilla on flex: 1. Vanhemmissa on display: flex.

Tulos: jokainen sininen säiliö vie koko rivin. Sisällä olevat lapset venyvät yhtä leveiksi. Säiliöt pinoutuvat sarakkeeseen, yksi toisensa alle.

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

Esimerkki 2: display: inline-flex

Samat kolme säiliötä, mutta display: inline-flex -arvolla. Lapsille on lisätty min-width: 50px, jotta säiliö ei kutistu nollaan.

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

Tulos: säiliöt asettuvat yhdelle riville. Jokainen vie täsmälleen sen verran leveyttä kuin sen lapset tarvitsevat (50px × 3 = 150px). Ne käyttäytyvät kuin sanat lauseessa ja rivittyvät seuraavalle riville vasta, kun tila loppuu.

Keskeinen oivallus: säiliön sisällä oleville flex-alkioille ei ole mitään eroa. Ominaisuudet, kuten justify-content ja align-items, samoin kuin gap ja flex-direction, toimivat identtisesti. Ainoa ero on siinä, miten itse säiliö vuorovaikuttaa ulkomaailman kanssa: block- vai inline-elementtinä.

Milloin käyttää inline-flex: 4 skenaariota

Jokainen asettelu ei vaadi inline-flex-arvoa. Mutta on tilanteita, joissa se ratkaisee tehtävän elegantimmin kuin flex + wrapper -yhdistelmä.

1. Lista tunnisteita tai merkkejä. Yleisin käyttötapaus. Jokainen tunniste on flex-säiliö, jossa on kuvake ja tekstiä keskitettynä. Itse tunnisteet virtaavat rivissä ja rivittyvät. inline-flex tunnisteessa, eikä wrapper-elementtejä tarvita.

2. Painikkeet, joissa on kuvakkeita tekstirivillä. Kun toimintopainike (kopioi, avaa, poista) on suoraan kappaleen tai otsikon sisällä. inline-flex mahdollistaa kuvakkeen keskittämisen painikkeen sisällä vetämättä painiketta pois tekstivirrasta.

3. Inline-työkalurivi. Joukko muotoilupainikkeita WYSIWYG-editorissa. Jokainen painike on inline-flex-säiliö, jonka sisällä on kuvake. Kaikki painikkeet asettuvat riviin ja rivittyvät luonnollisesti.

4. Pystysuuntainen keskitys inline-kontekstissa. Klassinen CSS-ongelmakohta: kuvakkeen keskittäminen pystysuunnassa suhteessa viereiseen tekstiin. vertical-align: middle toimii satunnaisesti. inline-flex yhdessä align-items: center -arvon kanssa toimii aina.

Tässä on koodi skenaarioille 2 ja 3, jotta ne eivät jää teoreettisiksi.

Painike, jossa on kuvake tekstissä (skenaario 2). Oletetaan, että tarvitset "kopioi"-painikkeen kappaleen sisällä. Sen on pysyttävä tekstivirrassa eikä se saa rikkoa riviä. Tässä minimaalinen CSS:

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
}

Kolme riviä flexbox-keskitystä, ja painikkeen sisällä oleva kuvake on linjattu molemmilla akseleilla. Ei line-height-kikkoja, ei position: relative plus transform -yhdistelmää. Painike asettuu tekstiin aivan kuin toinen sana.

Työkalurivi (skenaario 3). Tyypillinen WYSIWYG-editori: lihavointi-, kursivointi- ja linkkipainikkeet rivissä. Jokainen painike on inline-flex-säiliö:

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
}

Painikkeet rivittyvät, kun ikkuna kapenee, ilman ylimääräisiä wrapper-elementtejä. Vanhemmalle työkaluriville display: flex yhdessä flex-wrap: wrap- ja gap: 4px -arvojen kanssa toimii hyvin. Saat kaksitasoisen flex-koostumuksen: ulompi säiliö hallinnoi painikeriviä, ja jokainen painike keskittää kuvakkeensa.

Inline-flex-arvon sudenkuopat

Kolme ei-ilmeistä tilannetta, jotka säästävät tunteja DevToolsissa.

Tyhjä tila elementtien välissä. Kuten inline-block, inline-flex-elementit ovat herkkiä HTML:n tyhjälle tilalle. Kolmella eri riveillä olevalla <span>-elementillä, joissa on inline-flex, on 4-5 pikselin väli. Korjaus: font-size: 0 vanhemmalle ja palautus lapsille, tyhjän tilan poistaminen tagien välistä tai display: flex vanhemmassa yhdistettynä inline-flex-arvoon lapsissa.

text-align ei toimi flex-lapsiin. inline-block-elementit linjataan text-align: center -arvolla vanhemmassa. inline-flex-arvon kanssa tämä tekniikka toimii vain niin kauan kuin lapset eivät itse ole muuttuneet flex-säiliöiksi. Flex-alkiot eivät reagoi text-align-arvoon. Linjaa säiliöt justify-content-arvolla flex-vanhemmassa tai margin: auto -arvolla.

Oletus flex-suunta. inline-flex, kuten display: flex, asettelee lapset oletuksena riviin (flex-direction: row). Jos odotat saraketta inline-säiliön sisällä, aseta flex-direction: column eksplisiittisesti. Spesifikaatio ei lue kehittäjän ajatuksia.

Sukulaiset: muut inline display -variantit

inline-flex-arvolla on käsitteellisiä sisaruksia. Lähes jokaisella block display -arvolla on inline-vastine:

Mekanismi on kaikkialla sama: sisäinen asettelulogiikka säilyy täysin, vain säiliön ulkoinen käyttäytyminen muuttuu. inline-grid-arvon kanssa tarina on sama: grid-säiliö, joka asettuu riviin sen sijaan, että veisi vanhempansa koko leveyden.

Käytännössä inline-flex-arvoa käytetään useammin kuin inline-grid-arvoa. Syy on yksinkertainen: flex-säiliöitä tarvitaan yleisemmin pienille komponenteille (merkki, painike, kuvakeryhmä), joissa inline-käyttäytyminen on juuri sitä, mitä tarvitaan. Grid-asetteluja sovelletaan useammin suuriin rakenteellisiin lohkoihin, joissa inline-käyttäytyminen ei palvele mitään tarkoitusta.

inline-flex-arvon selaintuki on käytännössä täydellinen. Ominaisuus ilmestyi Flexible Box Layout Module Level 1 -spesifikaatiossa (W3C Candidate Recommendation, 2016) ja toimii kaikissa moderneissa selaimissa: Chrome versiosta 29 (2013) lähtien, Firefox versiosta 20 (2013) lähtien, Safari versiosta 9 (2015) lähtien ja Edge versiosta 12 (2015) lähtien. Internet Explorer 11 tukee inline-flex-arvoa varauksin, mutta StatCounterin vuoden 2025 tietojen mukaan IE11:n osuus on alle 0,1% maailmanlaajuisista markkinoista. Projekteissa, joiden on tuettava IE11:tä, testaa inline-flex manuaalisesti: tämä selain käyttäytyy arvaamattomasti joidenkin flex-basis- ja min-height-bugien kanssa.

⁉️🤔 Usein kysytyt kysymykset

Mitä eroa on display: inline-flex ja display: flex -arvoilla?

display: flex luo block-tason flex-säiliön, joka vie rivin koko käytettävissä olevan leveyden. display: inline-flex luo inline-tason flex-säiliön, jonka leveys määräytyy sen sisällön mukaan ja joka voi olla samalla rivillä muiden elementtien kanssa. Säiliön sisällä oleville lapsille ei ole mitään eroa: kaikki flex-ominaisuudet toimivat samalla tavalla molemmissa tapauksissa.

Milloin inline-flex on parempi kuin inline-block?

inline-block ei anna sinulle hallintaa lasten linjaukseen. Jos sinun on keskitettävä kuvake painikkeen sisällä sekä pysty- että vaakasuunnassa, inline-block pakottaa sinut muistelemaan line-height-kikkoja ja vertical-align-arvoa. inline-flex yhdessä justify-content: center- ja align-items: center -arvojen kanssa tekee tämän ilman temppuilua.

Voiko gap -arvoa käyttää inline-flex -arvon kanssa?

Kyllä, gap toimii inline-flex-arvossa täsmälleen samalla tavalla kuin tavallisessa flex-arvossa. Asetat välin flex-alkioiden välille, ja selain soveltaa sitä riippumatta siitä, onko säiliö block- vai inline-tasoa. Tuki gap-arvolle flexboxissa: kaikki modernit selaimet vuodesta 2021 lähtien.

Vaikuttaako inline-flex sisäkkäisiin flex-säiliöihin?

Ei. display-ominaisuus ei periydy. Jos elementti, jolla on display: flex, on inline-flex-säiliön sisällä, se on tavallinen block-tason flex-säiliö. Inline-käyttäytyminen koskee vain elementtiä, jolle eksplisiittisesti asetat inline-flex-arvon.

*inline-flex** ja saavutettavuus: onko sudenkuoppia?*

Ruudunlukijat eivät tee eroa flex- ja inline-flex-arvojen välillä. Molemmat arvot vaikuttavat vain visuaaliseen asetteluun eivätkä muuta semantiikkaa tai lukujärjestystä. Flex-ominaisuus order muuttaa visuaalista järjestystä, mutta ei järjestystä saavutettavuuspuussa; tämä pätee molempiin display-arvoihin.

Mitä käyttää: flex vai inline-flex

Valinta tiivistyy yksinkertaiseen kysymykseen: pitäisikö säiliön asettua riville naapureidensa kanssa vai viedä vanhempansa koko leveys?

Jos tyylität komponenttia (merkki, painike kuvakkeella, tunniste, työkalurivin kohde), käytä inline-flex-arvoa. Saat sisällön flex-keskityksen säilyttäen samalla luonnollisen inline-käyttäytymisen ilman ylimääräisiä wrapper-elementtejä.

Jos tyylität osiota, korttia, ylätunnistetta, alatunnistetta tai asettelua, pysy display: flex -arvossa. Block-käyttäytyminen on tässä sopivaa: säiliön tulee viedä oma rivinsä, ei tunkea viereisten elementtien väliin.

Kultainen sääntö: avaa DevTools ja katso elementtiä. Jos se on rivillä muiden kanssa, käytä inline-flex-arvoa. Jos se on omalla rivillään, käytä flex-arvoa. Näin yksinkertaista se on.