Source

Flex

Stjórnaðu fljótt skipulagi, röðun og stærð ristardálka, siglinga, íhluta og fleira með fullri föruneyti af móttækilegum flexbox tólum. Fyrir flóknari útfærslur gæti sérsniðið CSS verið nauðsynlegt.

Virkjaðu sveigjanlega hegðun

Notaðu displaytól til að búa til flexbox-ílát og umbreyttu beinum börnum í flex-hluti. Hægt er að breyta sveigjanlegum ílátum og hlutum frekar með viðbótar sveigjanlegum eiginleikum.

Ég er flexbox gámur!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ég er inline flexbox gámur!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Móttækileg afbrigði eru einnig til fyrir .d-flexog .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Stefna

Stilltu stefnu sveigjanlegra hluta í sveigjanlegu íláti með stefnubúnaði. Í flestum tilfellum geturðu sleppt láréttum flokki hér þar sem sjálfgefið vafra er row. Hins vegar gætirðu lent í aðstæðum þar sem þú þurftir að stilla þetta gildi sérstaklega (eins og móttækileg skipulag).

Notaðu .flex-rowtil að stilla lárétta stefnu (sjálfgefið vafra), eða .flex-row-reversetil að hefja lárétta stefnu frá gagnstæðri hlið.

Sveigjanlegur liður 1
Sveigjanlegur liður 2
Sveigjanlegur liður 3
Sveigjanlegur liður 1
Sveigjanlegur liður 2
Sveigjanlegur liður 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Notaðu .flex-columntil að stilla lóðrétta stefnu eða .flex-column-reversetil að hefja lóðrétta stefnu frá gagnstæðri hlið.

Sveigjanlegur liður 1
Sveigjanlegur liður 2
Sveigjanlegur liður 3
Sveigjanlegur liður 1
Sveigjanlegur liður 2
Sveigjanlegur liður 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Móttækileg afbrigði eru einnig til fyrir flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Rökstyðjið innihald

Notaðu justify-contenttól á flexbox-ílátum til að breyta röðun sveigjanlegra hluta á aðalásnum (x-ás til að byrja, y-ás ef flex-direction: column). Veldu úr start(sjálfgefið vafra), end, center, between, eða around.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Móttækileg afbrigði eru einnig til fyrir justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Samræma hluti

Notaðu align-itemstól á flexbox-ílátum til að breyta röðun sveigjanlegra hluta á þverásnum (y-ás til að byrja, x-ás ef flex-direction: column). Veldu úr start, end, center, baseline, eða stretch(sjálfgefið vafra).

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Móttækileg afbrigði eru einnig til fyrir align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Samræma sjálfan sig

Notaðu align-selftól á flexbox-hlutum til að breyta röðun þeirra á þverásnum hver fyrir sig (y-ásinn til að byrja, x-ásinn ef flex-direction: column). Veldu úr sömu valmöguleikum og align-items: start, end, center, baseline, eða stretch(sjálfgefið vafra).

Sveigjanlegur hlutur
Jafnt sveigjanlegt atriði
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Jafnt sveigjanlegt atriði
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Jafnt sveigjanlegt atriði
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Jafnt sveigjanlegt atriði
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Jafnt sveigjanlegt atriði
Sveigjanlegur hlutur
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Móttækileg afbrigði eru einnig til fyrir align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Fylla

Notaðu .flex-fillbekkinn á röð systkinaþátta til að þvinga þá í jafna breidd á meðan þú tekur allt tiltækt lárétt pláss. Sérstaklega gagnlegt fyrir jafnbreiðar eða réttlætanlegar siglingar.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Móttækileg afbrigði eru einnig til fyrir flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Vaxa og minnka

Notaðu .flex-grow-*tól til að skipta um getu sveigjanlegra hluta til að vaxa til að fylla laus pláss. Í dæminu hér að neðan nota .flex-grow-1þættirnir allt tiltækt pláss sem þeir geta, en leyfa hinum tveimur sveigjanlegu hlutunum sem eftir eru nauðsynlega plássið.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Þriðji sveigjanlegur liður
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Notaðu .flex-shrink-*tól til að skipta um getu sveigjanlegra hluta til að minnka ef þörf krefur. .flex-shrink-1Í dæminu hér að neðan neyðist annað sveigjanlegt atriði með til að vefja innihald þess í nýja línu, "minnkar" til að leyfa meira pláss fyrir fyrri sveigjanlega hlutinn með .w-100.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Móttækileg afbrigði eru einnig til fyrir flex-growog flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1

Sjálfvirk spássía

Flexbox getur gert ansi ógnvekjandi hluti þegar þú blandar sveigjanlegu línum saman við sjálfvirka spássíu. Sýnd hér að neðan eru þrjú dæmi um að stjórna sveigjanlegum hlutum með sjálfvirkum spássíur: sjálfgefið (engin sjálfvirk spássía), ýta tveimur atriðum til hægri ( .mr-auto) og ýta tveimur atriðum til vinstri ( .ml-auto).

Því miður styðja IE10 og IE11 ekki almennilega sjálfvirka framlegð á sveigjanlegum hlutum þar sem foreldri hefur ekki sjálfgefið justify-contentgildi. Sjá þetta StackOverflow svar fyrir frekari upplýsingar.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

Með align-atriðum

Færðu einn sveigjanlegan hlut lóðrétt efst eða neðst á ílát með því að blanda align-items, flex-direction: column, og margin-top: autoeða margin-bottom: auto.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Vefja

Breyttu því hvernig sveigjanlegir hlutir pakka inn í sveigjanlega ílát. Veldu á milli alls engin umbúðir (sjálfgefið vafra) með .flex-nowrap, umbúðir með .flex-wrapeða öfugri umbúðir með .flex-wrap-reverse.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex flex-nowrap">
  ...
</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex flex-wrap">
  ...
</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Móttækileg afbrigði eru einnig til fyrir flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Panta

Breyttu sjónrænni röð tiltekinna sveigjanlegra hluta með handfylli af ordertólum. Við bjóðum aðeins upp á valkosti til að gera hlut fyrst eða síðast, svo og endurstillingu til að nota DOM pöntunina. Eins og ordertekur hvaða heiltölugildi sem er (td, 5), bættu við sérsniðnum CSS fyrir öll viðbótargildi sem þarf.

Fyrsti sveigjanlegur hlutur
Annað sveigjanlegt atriði
Þriðji sveigjanlegur liður
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Móttækileg afbrigði eru einnig til fyrir order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Samræma efni

Notaðu align-contenttól á flexbox ílátum til að stilla sveigjanlegum hlutum saman á þverásnum. Veldu úr start(sjálfgefið vafra), end, center, between, around, eða stretch. Til að sýna fram á þessi tól höfum við framfylgt flex-wrap: wrapog fjölgað sveigjanlegum hlutum.

Höfuð upp! Þessi eiginleiki hefur engin áhrif á stakar raðir af sveigjanlegum hlutum.

Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-content-end flex-wrap">...</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-content-center flex-wrap">...</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-content-between flex-wrap">...</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-content-around flex-wrap">...</div>
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
Sveigjanlegur hlutur
<div class="d-flex align-content-stretch flex-wrap">...</div>

Móttækileg afbrigði eru einnig til fyrir align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch