Buig
Bestuur vinnig die uitleg, belyning en grootte van roosterkolomme, navigasie, komponente en meer met 'n volledige reeks responsiewe flexbox-hulpmiddels. Vir meer komplekse implementerings kan pasgemaakte CSS nodig wees.
Pas displaynutsprogramme toe om 'n flexbox-houer te skep en transformeer direkte kinderelemente in flex-items. Buighouers en items kan verder aangepas word met bykomende buigeienskappe.
<div class="d-flex p-2">I'm a flexbox container!</div><div class="d-inline-flex p-2">I'm an inline flexbox container!</div>Responsiewe variasies bestaan ook vir .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 die rigting van buigitems in 'n buighouer met rigtinghulpmiddels. In die meeste gevalle kan jy die horisontale klas hier weglaat aangesien die blaaier verstek is row. Jy kan egter situasies teëkom waar jy hierdie waarde eksplisiet moes stel (soos responsiewe uitlegte).
Gebruik .flex-rowom 'n horisontale rigting te stel (die blaaier verstek), of .flex-row-reverseom die horisontale rigting van die teenoorgestelde kant af te begin.
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>Gebruik .flex-columnom 'n vertikale rigting te stel, of .flex-column-reverseom die vertikale rigting van die teenoorgestelde kant af te begin.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>Responsiewe variasies bestaan ook vir 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
Gebruik justify-contentnutsprogramme op flexbox-houers om die belyning van flex-items op die hoof-as te verander (die x-as om te begin, y-as as flex-direction: column). Kies uit start(blaaier verstek), 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>Responsiewe variasies bestaan ook vir 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
Gebruik align-itemsnutsprogramme op flexbox-houers om die belyning van flex-items op die kruis-as te verander (die y-as om te begin, x-as as flex-direction: column). Kies uit start, end, center, baseline, of stretch(blaaier verstek).
<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>Responsiewe variasies bestaan ook vir 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
Gebruik align-selfnutsprogramme op flexbox-items om individueel hul belyning op die kruis-as te verander (die y-as om te begin, x-as as flex-direction: column). Kies uit dieselfde opsies as align-items: start, end, center, baseline, of stretch(blaaier verstek).
<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>Responsiewe variasies bestaan ook vir 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
Flexbox kan 'n paar ongelooflike dinge doen wanneer jy buigbelynings met outomatiese marges meng. Hieronder is drie voorbeelde van die beheer van buigitems via outo-marges: verstek (geen outo-marge), druk twee items na regs ( .mr-auto), en druk twee items na links ( .ml-auto).
Ongelukkig ondersteun IE10 en IE11 nie outomatiese marges op buigsame items waarvan die ouer 'n nie-verstekwaarde het justify-contentnie. Sien hierdie StackOverflow-antwoord vir meer besonderhede.
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>Beweeg een buigitem vertikaal na die bo- of onderkant van 'n houer deur align-items, flex-direction: column, en margin-top: autoof te meng margin-bottom: auto.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>Verander hoe buigsame items in 'n buigsame houer toegedraai word. Kies uit geen omvou nie (die blaaier verstek) met .flex-nowrap, omvou met .flex-wrapof omgekeerde omvou met .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>Responsiewe variasies bestaan ook vir 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
Verander die visuele volgorde van spesifieke buigsame items met 'n handvol ordernutsprogramme. Ons bied slegs opsies om 'n item eerste of laaste te maak, sowel as 'n terugstelling om die DOM-bestelling te gebruik. Soos orderenige heelgetalwaarde (bv. 5), voeg pasgemaakte CSS by vir enige bykomende waardes wat nodig is.
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>Responsiewe variasies bestaan ook vir 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
Gebruik align-contentnutsprogramme op flexbox-houers om flex-items saam op die kruis-as in lyn te bring. Kies uit start(blaaier verstek), end, center, between, around, of stretch. flex-wrap: wrapOm hierdie nutsprogramme te demonstreer, het ons die aantal buigsame items afgedwing en verhoog.
Let op! Hierdie eienskap het geen effek op enkele rye buigitems nie.
<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>Responsiewe variasies bestaan ook vir 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