Flex
Behear fluch de yndieling, ôfstimming en grutte fan rasterkolommen, navigaasje, komponinten en mear mei in folsleine suite fan responsive flexbox-helpprogramma's. Foar mear komplekse ymplemintaasjes kin oanpaste CSS nedich wêze.
displayBrûk nutsbedriuwen om in flexbox-container te meitsjen en direkte berneleminten te transformearjen yn flex - items. Flex-konteners en items kinne fierder wizige wurde mei ekstra flex-eigenskippen.
<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>Responsive fariaasjes besteane ek foar .d-flexen .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
Stel de rjochting fan flex items yn in flex container mei rjochting nutsbedriuwen. Yn 'e measte gefallen kinne jo hjir de horizontale klasse weilitte, om't de browser standert is row. Jo kinne lykwols situaasjes tsjinkomme wêr't jo dizze wearde eksplisyt moatte ynstelle (lykas responsive layouts).
Brûk .flex-rowom in horizontale rjochting yn te stellen (de browser standert), of .flex-row-reverseom de horizontale rjochting fan 'e tsjinoerstelde kant te begjinnen.
<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>Brûk .flex-columnom in fertikale rjochting yn te stellen, of .flex-column-reverseom de fertikale rjochting fan 'e tsjinoerstelde kant te begjinnen.
<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>Responsive fariaasjes besteane ek foar 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
Brûk justify-contentnutsbedriuwen op flexbox-konteners om de ôfstimming fan flex-items op 'e haadas te feroarjen (de x-as om te begjinnen, y-as as flex-direction: column). Kies út start(standert browser), end, center, between, of 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>Responsive fariaasjes besteane ek foar 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
Brûk align-itemsnutsbedriuwen op flexbox-konteners om de ôfstimming fan flex-items op 'e krús-as te feroarjen (de y-as om te begjinnen, x-as as flex-direction: column). Kies út start, end, center, baseline, of stretch(standert browser).
<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>Responsive fariaasjes besteane ek foar 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
Brûk align-selfnutsbedriuwen op flexbox-items om har ôfstimming op 'e krús-as yndividueel te feroarjen (de y-as om te begjinnen, x-as as flex-direction: column). Kies út deselde opsjes as align-items: start, end, center, baseline, of stretch(standert browser).
<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>Responsive fariaasjes besteane ek foar 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
Brûk de .flex-fillklasse op in searje sibling-eleminten om se yn gelikense breedte te twingen, wylst se alle beskikbere horizontale romte opnimme. Benammen nuttich foar gelikense breedte, as rjochtfeardige, navigaasje.
<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>Responsive fariaasjes besteane ek foar flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Brûk .flex-grow-*nutsbedriuwen om it fermogen fan in flex-item te wikseljen om te groeien om beskikbere romte te foljen. Yn it foarbyld hjirûnder .flex-grow-1brûke de eleminten alle beskikbere romte dy't it kin, wylst de oerbleaune twa flexitems harren nedige romte tastean.
<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>Brûk .flex-shrink-*nutsbedriuwen om de mooglikheid fan in flex-item te wikseljen om te krimpen as nedich. Yn it foarbyld hjirûnder, it twadde flex item mei .flex-shrink-1wurdt twongen om wrap syn ynhâld nei in nije rigel, "krimpen" te tastean mear romte foar de foarige flex item mei .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>Responsive fariaasjes besteane ek foar flex-growen 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
Flexbox kin wat aardich geweldige dingen dwaan as jo flex-ôfstimmingen mingje mei automarzjes. Hjirûnder werjûn trije foarbylden fan it kontrolearjen fan flex items fia auto marzjes: standert (gjin auto marzje), triuwe twa items nei rjochts ( .mr-auto), en triuwe twa items nei lofts ( .ml-auto).
Spitigernôch, IE10 en IE11 net goed stypje auto marzjes op flex items waans âlder hat in net-standert justify-contentwearde. Sjoch dit StackOverflow-antwurd foar mear details.
<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>Fertikaal ferpleatse ien flex-item nei de boppe- of ûnderkant fan in kontener troch te mingjen align-items, flex-direction: column, en margin-top: autoof 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>Feroarje hoe't flex items wrapje yn in flexcontainer. Kies út hielendal gjin wrapping (de browser standert) mei .flex-nowrap, wrapping mei .flex-wrap, of omkearde wrapping mei .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>Responsive fariaasjes besteane ek foar 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
Feroarje de fisuele folchoarder fan spesifike flex-items mei in hânfol ordernutsbedriuwen. Wy jouwe allinich opsjes foar it meitsjen fan in item earst as lêste, lykas ek in reset om de DOM-oarder te brûken. As ordernimt eltse integer wearde (bgl, 5), add custom CSS foar alle ekstra wearden nedich.
<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>Responsive fariaasjes besteane ek foar 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
Brûk align-contentnutsbedriuwen op flexbox-konteners om flex-items tegearre op 'e krúsas út te rjochtsjen. Kies út start(standert browser), end, center, between, around, of stretch. Om dizze nutsfoarsjenningen te demonstrearjen, hawwe wy flex-wrap: wrapit oantal flexitems hanthavene en ferhege.
Heads up! Dit pân hat gjin effekt op inkele rigen fan flex items.
<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>Responsive fariaasjes besteane ek foar 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