in English

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.

Op hierdie bladsy

Aktiveer buigingsgedrag

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.

Ek is 'n flexbox-houer!

html

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

Ek is 'n inline flexbox-houer!

html

<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
.d-xxl-flex
.d-xxl-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-rowom 'n horisontale rigting te stel (die blaaier verstek), of .flex-row-reverseom die horisontale rigting van die teenoorgestelde kant af te begin.

Buig item 1

Buig item 2

Buig item 3

Buig item 1

Buig item 2

Buig item 3

html

<div class="d-flex flex-row mb-3">
  <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.

Buig item 1

Buig item 2

Buig item 3

Buig item 1

Buig item 2

Buig item 3

html

<div class="d-flex flex-column mb-3">
  <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
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Regverdig inhoud

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, around, of evenly.

Buig item

<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>
<div class="d-flex justify-content-evenly">...</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-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Belyn items

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

Buig item

<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
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Belyn self

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

Buig item

Belynde buig-item

Buig item

Belynde buig-item

Buig item

Belynde buig-item

Buig item

Belynde buig-item

Buig item

Belynde buig-item

Buig item

<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
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Vul

Gebruik die .flex-fillklas 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.

Buig item met baie inhoud

Buig item

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
.flex-xxl-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-1elemente alle beskikbare spasie wat dit kan, terwyl die oorblywende twee buigitems hul nodige spasie toelaat.

Buig item

Derde buig item

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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-1gedwing om sy inhoud na 'n nuwe reël toe te draai, wat "krimp" om meer spasie vir die vorige buigitem met .w-100.

Buig item

html

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

Responsiewe variasies bestaan ook vir 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
.flex-xxl-{grow|shrink}-0
.flex-xxl-{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 ( .me-auto), en druk twee items na links ( .ms-auto).

Buig item

html

<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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: autoof te meng margin-bottom: auto.

Buig item

html

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

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-wrapof omgekeerde omvou met .flex-wrap-reverse.

Buig item

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

Buig item

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

Buig item

<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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Orde

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 van 0 tot 5 neem, voeg pasgemaakte CSS by vir enige bykomende waardes wat nodig is.

Eerste buig item

Tweede buig item

Derde buig item

html

<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-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Daarbenewens is daar ook responsiewe .order-firsten .order-lastklasse wat die ordervan 'n element verander deur onderskeidelik order: -1en order: 6toe te pas.

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Belyn inhoud

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.

Buig item

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

Buig item

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

Buig item

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

Buig item

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

Buig item

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

Buig item

<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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Media voorwerp

Wil u die media-objekkomponent vanaf Bootstrap 4 herhaal? Herskep dit in 'n japtrap met 'n paar buigsame hulpprogramme wat selfs meer buigsaamheid en aanpassing as voorheen moontlik maak.

Dit is sommige inhoud van 'n mediakomponent. Jy kan dit met enige inhoud vervang en dit aanpas soos nodig.

html

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

En sê jy wil die inhoud vertikaal langs die prent sentreer:

Dit is sommige inhoud van 'n mediakomponent. Jy kan dit met enige inhoud vervang en dit aanpas soos nodig.

html

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

Utilities API

Flexbox nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),