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.

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<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ð.

<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ð.

<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.

<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).

<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).

<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 þá í breidd sem er jafn breidd og innihald þeirra (eða jafn breidd ef innihald þeirra fer ekki yfir rammakassa þeirra) á meðan þú tekur allt tiltækt lárétt pláss.

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</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ð.

<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 annar sveigjanlegur hlutur með til að vefja innihald sitt í nýja línu, "minnkar" til að leyfa meira pláss fyrir fyrri sveigjanlega hlutinn með .w-100.

<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.

<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.

<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.

<div class="d-flex flex-nowrap">
  ...
</div>

<div class="d-flex flex-wrap">
  ...
</div>

<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.

<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.

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

<div class="d-flex align-content-end flex-wrap">...</div>

<div class="d-flex align-content-center flex-wrap">...</div>

<div class="d-flex align-content-between flex-wrap">...</div>

<div class="d-flex align-content-around flex-wrap">...</div>

<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-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch