Mis on display: inline-flex

Flexbox on muutunud igapäevase veebikujunduse alustalaks. Iga front-end arendaja tunneb ja kasutab display: flex. Kuid sellel atribuudil on vähem tuntud sugulane, display: inline-flex. Sellest kirjutatakse harva ja kasutatakse veelgi harvem. See on viga.

Erinevus taandub ühele lausele: inline-flex loob flex-konteineri, mis ise käitub nagu reasisene element. Selle lapsed on tavalised flex-üksused kõigi Flexboxi võimalustega. Vanem aga ei võta enda alla kogu rea saadaolevat laiust. See kohandub oma sisu suuruse järgi ja asub naaberelementidega samal real.

Olukord on täpselt nagu paar display: block ja display: inline-block. Blokielement võtab terve rea, reasisene element ainult nii palju, kui sisu vajab. Sama kehtib siin: flex loob blokitaseme flex-konteineri, samas kui inline-flex loob reataseme oma.

Praktikas avab see stsenaariume, mis tavalise flex puhul nõuaksid täiendavaid ümbriskonteinereid, laiuse häkke või float jäänukeid.

💡 Kiire ülevaade:

• display: inline-flex loob flex-konteineri, mis käitub nagu reasisene element ega võta tervet rida. Sellise konteineri laiuse määrab selle sisu, mitte vanem.
• Kõik flex-atribuudid töötavad inline-flex sees täpselt samamoodi nagu tavalise display: flex puhul. Laste paigutuses ei ole erinevusi; ainus erinevus on konteineri välises käitumises.
• Peamine kasutusjuht: märgised, sildid ja ikoonidega nupud, kus üks inline-flex elemendil asendab flex-vanema ja reasisese lapse kombinatsiooni. Saate sisu tsentreerimise ilma täiendavate ümbristeta.
• Teistel display väärtustel on ka reasisesed vasted: inline-block, inline-table ja inline-grid töötavad samal põhimõttel. Sisemine paigutusloogika säilib; muutub ainult konteineri väline käitumine.

Reaalne juhtum: ikoonidega märgised

Kujutage ette tüüpilist ülesannet. Lehel on vaja rida märgiseid. Igal neist on ikoon ja tekst, kusjuures ikoon on vertikaalselt ja horisontaalselt tsentreeritud värvilise ringi sees. Märgised ise asetsevad reas nagu tavaline tekst ja murduvad järgmisele reale, kui need ei mahu.

Kui määrata märgistele display: flex, venib igaüks neist vanema täislaiusele. Märgised reastuvad veergu, mitte ritta. Saate seda parandada ümbrisega, millel on vanemal display: flex. Aga miks lisada täiendav ümbris, kui teil on inline-flex?

HTML struktuur on elementaarne:

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>

Pange tähele, et ümbris .badges-list ei tee reasisese positsioneerimise jaoks midagi. .c-badge ise tegeleb sellega.

CSS märgise jaoks:

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

See on kõik. Iga märgis on reasisese käitumisega flex-konteiner. Ikoon sees on tsentreeritud, kasutades justify-content ja align-items. Märgised ise reastuvad ritta ja murduvad uuele reale, kui laiust ei ole piisavalt. Täpselt see, mida disain nõudis, ilma täiendavate ümbristeta.

Inline-flex vs flex: visuaalne võrdlus

Parim viis erinevuse mõistmiseks on vaadata kahte identset konteinerite komplekti, üks display: flex ja teine display: inline-flex.

Näide 1: display: flex

Kolm vanemkonteinerit sinise taustaga. Igaühe sees on kolm punast last atribuudiga flex: 1. Vanematel on display: flex.

Tulemus: iga sinine konteiner võtab terve rea. Lapsed sees venivad võrdsele laiusele. Konteinerid on virnastatud veergu, üksteise alla.

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

Näide 2: display: inline-flex

Samad kolm konteinerit, kuid display: inline-flex. Lastele on lisatud min-width: 50px, et konteiner ei tõmbuks nulli.

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

Tulemus: konteinerid asuvad ühel real. Igaüks võtab täpselt nii palju laiust, kui tema lapsed vajavad (50px × 3 = 150px). Nad käituvad nagu sõnad lauses ja murduvad järgmisele reale ainult siis, kui ruum otsa saab.

Peamine järeldus: konteineri sees olevate flex-üksuste jaoks ei ole mingit vahet. Atribuudid nagu justify-content ja align-items, samuti gap ja flex-direction, töötavad identselt. Ainus erinevus on selles, kuidas konteiner ise välismaailmaga suhtleb: kas bloki või reasisese elemendina.

Millal kasutada inline-flex: 4 stsenaariumi

Mitte iga paigutus ei vaja inline-flex. Kuid on olukordi, kus see lahendab ülesande elegantsemalt kui flex + ümbrise kombinatsioon.

1. Siltide või märgiste loend. Kõige tavalisem kasutusjuht. Iga silt on flex-konteiner, mille keskel on ikoon ja tekst. Sildid ise voolavad reas koos reamurdmisega. inline-flex sildil ja ümbriseid pole vaja.

2. Ikoonidega nupud tekstireas. Kui tegevusnupp (kopeeri, ava, kustuta) asub otse lõigu või pealkirja sees. inline-flex võimaldab ikooni nupu sees tsentreerida, ilma nuppu tekstivoost välja tõmbamata.

3. Reasisene tööriistariba. Vormindusnuppude komplekt WYSIWYG-redaktoris. Iga nupp on inline-flex konteiner, mille sees on ikoon. Kõik nupud asuvad reas ja murduvad loomulikult.

4. Vertikaalne tsentreerimine reasiseses kontekstis. Klassikaline CSS-i valukoht: ikooni vertikaalne tsentreerimine külgneva teksti suhtes. vertical-align: middle töötab juhuslikult. inline-flex koos align-items: center töötab alati.

Siin on kood stsenaariumide 2 ja 3 jaoks, et need ei jääks teoreetiliseks.

Ikooniga nupp tekstis (stsenaarium 2). Oletame, et vajate lõigu sisse „kopeeri" nuppu. See peab jääma tekstivoogu ega tohi rida katkestada. Siin on minimaalne 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
}

Kolm rida flexboxi tsentreerimist ja ikoon nupu sees on joondatud mõlemal teljel. Ei mingeid line-height häkke, ei position: relative pluss transform. Nupp istub tekstis nagu üks sõna teiste seas.

Tööriistariba (stsenaarium 3). Tüüpiline WYSIWYG-redaktor: paksu kirja, kursiivi ja lingi nupud asuvad reas. Iga nupp on inline-flex konteiner:

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
}

Nupud murduvad akna kitsenedes ilma täiendavate ümbristeta. Vanema tööriistariba jaoks sobib hästi display: flex koos flex-wrap: wrap ja gap: 4px. Saate kahetasandilise flex-kompositsiooni: välimine konteiner haldab nuppude rida ja iga nupp tsentreerib oma ikooni.

Inline-flex lõksud

Kolm mitteilmset olukorda, mis säästavad tunde DevToolsis.

Tühik elementide vahel. Nagu inline-block, on ka inline-flex elemendid tundlikud HTML-i tühikute suhtes. Kolmel eraldi real oleval inline-flex atribuudiga <span> elemendil on 4-5 piksline vahe. Lahendus: font-size: 0 vanemal koos taastamisega lastel, tühikute eemaldamine siltide vahelt või display: flex kombinatsioon vanemal pluss inline-flex lastel.

text-align ei tööta flex-lastel. inline-block puhul joondatakse elemente vanemal text-align: center abil. inline-flex puhul töötab see tehnika ainult seni, kuni lapsed ei ole ise flex-konteineriteks muutunud. Flex-üksused ei reageeri text-align-ile. Joondage konteinereid flex-vanemal justify-content või margin: auto abil.

Vaikimisi flex-suund. inline-flex paigutab, nagu ka display: flex, lapsed vaikimisi ritta (flex-direction: row). Kui eeldate reasiseses konteineris veergu, määrake flex-direction: column selgesõnaliselt. Spetsifikatsioon ei loe arendaja mõtteid.

Sugulased: muud reasisesed display variandid

inline-flex-il on kontseptuaalsed õed-vennad. Peaaegu igal bloki display väärtusel on reasisene vaste:

Mehhanism on igal pool sama: sisemine paigutusloogika on täielikult säilinud, muutub ainult konteineri väline käitumine. inline-grid puhul on lugu sama: ruudustikkonteiner, mis asub reas, selle asemel et võtta vanema täislaius.

Praktikas kasutatakse inline-flex sagedamini kui inline-grid. Põhjus on lihtne: flex-konteinereid on sagedamini vaja väikeste komponentide (märgis, nupp, ikoonide grupp) jaoks, kus reasisene käitumine on just see, mida vaja. Ruudustikupaigutusi rakendatakse sagedamini suurtele struktuursetele plokkidele, kus inline käitumine ei teeni mingit eesmärki.

inline-flex brauseritugi on praktiliselt täielik. Atribuut ilmus Flexible Box Layout Module Level 1 spetsifikatsioonis (W3C Candidate Recommendation, 2016) ja töötab kõigis kaasaegsetes brauserites: Chrome alates versioonist 29 (2013), Firefox alates versioonist 20 (2013), Safari alates versioonist 9 (2015) ja Edge alates versioonist 12 (2015). Internet Explorer 11 toetab inline-flex mööndustega, kuid StatCounteri 2025. aasta andmetel on IE11 osakaal alla 0,1% globaalsest turust. Projektide puhul, mis peavad toetama IE11, testige inline-flex käsitsi: see brauser käitub ettearvamatult mõnede flex-basis ja min-height vigadega.

⁉️🤔 Korduma kippuvad küsimused

Mis vahe on display: inline-flex ja display: flex vahel?

display: flex loob blokitaseme flex-konteineri, mis võtab kogu rea saadaoleva laiuse. display: inline-flex loob reataseme flex-konteineri, mille laiuse määrab selle sisu ja mis võib asuda teiste elementidega samal real. Konteineri sees olevate laste jaoks ei ole vahet: kõik flex-atribuudid töötavad mõlemal juhul samamoodi.

Millal on inline-flex parem kui inline-block?

inline-block ei anna teile kontrolli laste joondamise üle. Kui teil on vaja ikooni nupu sees nii vertikaalselt kui ka horisontaalselt tsentreerida, sunnib inline-block teid meenutama line-height häkke ja vertical-align. inline-flex koos justify-content: center ja align-items: center teeb seda ilma igasuguse vaevata.

Kas gap saab kasutada koos inline-flex?

Jah, gap töötab inline-flex puhul täpselt samamoodi nagu tavalise flex puhul. Määrate flex-üksuste vahelise vahe ja brauser rakendab seda sõltumata sellest, kas konteiner on bloki- või reatasemel. gap tugi flexboxis: kõik kaasaegsed brauserid alates 2021. aastast.

Kas inline-flex mõjutab pesastatud flex-konteinereid?

Ei. Atribuut display ei ole päritav. Kui display: flex-iga element on inline-flex konteineri sees, on see tavaline blokitaseme flex-konteiner. Reasisene käitumine kehtib ainult sellele elemendile, millele te selgesõnaliselt inline-flex määrate.

*inline-flex** ja ligipääsetavus: kas on mingeid lõkse?*

Ekraanilugejad ei tee vahet flex ja inline-flex vahel. Mõlemad väärtused mõjutavad ainult visuaalset paigutust ega muuda semantikat ega lugemisjärjekorda. Flex-atribuut order muudab visuaalset järjekorda, kuid mitte järjekorda ligipääsetavuse puus; see kehtib mõlema display väärtuse puhul.

Mida kasutada: flex või inline-flex

Valik taandub lihtsale küsimusele: kas konteiner peaks asuma oma naabritega ühel real või võtma kogu oma vanema laiuse?

Kui kujundate komponenti (märgis, ikooniga nupp, silt, tööriistariba üksus), kasutage inline-flex. Saate sisu flex-tsentreerimise, säilitades samal ajal loomuliku reasisese käitumise ilma täiendavate ümbristeta.

Kui kujundate sektsiooni, kaarti, päist, jalust või paigutust, jääge display: flex juurde. Blokikäitumine on siin asjakohane: konteiner peaks võtma oma rea, mitte end naaberelementide vahele suruma.

Kuldreegel: avage DevTools ja vaadake elementi. Kui see on teistega ühel real, kasutage inline-flex. Kui see on omaette real, kasutage flex. Nii lihtne see ongi.