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.
Aktiveer buigingsgedrag
Pas display
nutsprogramme 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 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Responsiewe variasies bestaan ook vir .d-flex
en .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
Rigting
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-row
om 'n horisontale rigting te stel (die blaaier verstek), of .flex-row-reverse
om die horisontale rigting van die teenoorgestelde kant af te begin.
<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>
Gebruik .flex-column
om 'n vertikale rigting te stel, of .flex-column-reverse
om die vertikale rigting van die teenoorgestelde kant af te begin.
<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>
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
Regverdig inhoud
Gebruik justify-content
nutsprogramme 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
Belyn items
Gebruik align-items
nutsprogramme 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
Belyn self
Gebruik align-self
nutsprogramme 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
Vul
Gebruik die .flex-fill
klas op 'n reeks broers en susterselemente om hulle in breedtes gelykstaande aan hul inhoud te dwing (of gelyke breedtes as hul inhoud nie hul grenskassies oorskry nie) terwyl jy alle beskikbare horisontale spasie opneem.
<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>
Responsiewe variasies bestaan ook vir flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Groei en krimp
Gebruik .flex-grow-*
nutsprogramme om 'n buigsame item se vermoë om te groei te verander om beskikbare spasie te vul. In die voorbeeld hieronder gebruik die .flex-grow-1
elemente alle beskikbare spasie wat dit kan, terwyl die oorblywende twee buigitems hul nodige spasie toelaat.
<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>
Gebruik .flex-shrink-*
nutsprogramme om 'n buigitem se vermoë te verander om te krimp indien nodig. In die voorbeeld hieronder word die tweede buig-item .flex-shrink-1
gedwing om sy inhoud na 'n nuwe reël toe te draai, wat "krimp" om meer spasie vir die vorige buigitem met .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>
Responsiewe variasies bestaan ook vir flex-grow
en 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
Outo-marges
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-content
nie. Sien hierdie StackOverflow-antwoord vir meer besonderhede.
<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>
Met align-items
Beweeg een buigitem vertikaal na die bo- of onderkant van 'n houer deur align-items
, flex-direction: column
, en margin-top: auto
of te meng 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>
Wikkel
Verander hoe buigsame items in 'n buigsame houer toegedraai word. Kies uit geen omvou nie (die blaaier verstek) met .flex-nowrap
, omvou met .flex-wrap
of 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
Orde
Verander die visuele volgorde van spesifieke buigsame items met 'n handvol order
nutsprogramme. Ons bied slegs opsies om 'n item eerste of laaste te maak, sowel as 'n terugstelling om die DOM-bestelling te gebruik. Soos order
enige heelgetalwaarde (bv. 5
), voeg pasgemaakte CSS by vir enige bykomende waardes wat nodig is.
<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>
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
Belyn inhoud
Gebruik align-content
nutsprogramme 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: wrap
Om 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-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