Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju

Ātri pārvaldiet režģa kolonnu izkārtojumu, izlīdzināšanu un izmēru noteikšanu, navigāciju, komponentus un daudz ko citu, izmantojot pilnu adaptīvo flexbox utilītu komplektu. Sarežģītākām ieviešanām var būt nepieciešams pielāgots CSS.

Iespējot elastīgu uzvedību

Lietojiet displayutilītas, lai izveidotu flexbox konteineru un pārveidotu tiešos bērnu elementus elastīgos priekšmetos. Flex konteinerus un priekšmetus var vēl vairāk pārveidot ar papildu elastīgām īpašībām.

Es esmu flexbox konteiners!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Es esmu iekļauts flexbox konteiners!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Adaptīvās variācijas pastāv arī .d-flexun .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

Virziens

Iestatiet elastīgo priekšmetu virzienu elastīgā konteinerā ar virziena utilītiem. Vairumā gadījumu jūs varat izlaist horizontālo klasi, jo pārlūkprogrammas noklusējuma iestatījums ir row. Tomēr var rasties situācijas, kad šī vērtība ir skaidri jāiestata (piemēram, adaptīvi izkārtojumi).

Izmantojiet .flex-row, lai iestatītu horizontālo virzienu (pārlūka noklusējuma iestatījums) vai .flex-row-reversesāktu horizontālo virzienu no pretējās puses.

Flex vienums 1
Flex vienums 2
Flex vienums 3
Flex vienums 1
Flex vienums 2
Flex vienums 3
<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>

Izmantojiet .flex-column, lai iestatītu vertikālo virzienu vai .flex-column-reversesāktu vertikālo virzienu no pretējās puses.

Flex vienums 1
Flex vienums 2
Flex vienums 3
Flex vienums 1
Flex vienums 2
Flex vienums 3
<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>

Adaptīvās variācijas pastāv arī 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

Pamatojiet saturu

Izmantojiet justify-contentutilītprogrammas flexbox konteineros, lai mainītu elastīgo vienumu izlīdzināšanu uz galvenās ass (no x ass sākuma, y ​​ass, ja flex-direction: column). Izvēlieties no start(pārlūka noklusējuma), end, center, between, around, vai evenly.

Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<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>

Adaptīvās variācijas pastāv arī 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

Izlīdziniet vienumus

Izmantojiet align-itemsutilītprogrammas flexbox konteineros, lai mainītu elastīgo vienumu izlīdzināšanu uz šķērsass (sākumam ar y ass, ja flex-direction: column) ass. Izvēlieties kādu no start, end, center, baseline, vai stretch(pārlūka noklusējuma iestatījumi).

Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<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>

Adaptīvās variācijas pastāv arī 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

Saskaņot sevi

Izmantojiet align-selfutilītprogrammas flexbox vienumiem, lai individuāli mainītu to izlīdzināšanu uz šķērsass (sākt ar y ass, ja flex-direction: column) ass. Izvēlieties kādu no tām pašām opcijām kā align-items: start, end, center, baseline, vai stretch(pārlūka noklusējuma iestatījumi).

Flex prece
Izlīdzināts elastīgs vienums
Flex prece
Flex prece
Izlīdzināts elastīgs vienums
Flex prece
Flex prece
Izlīdzināts elastīgs vienums
Flex prece
Flex prece
Izlīdzināts elastīgs vienums
Flex prece
Flex prece
Izlīdzināts elastīgs vienums
Flex prece
<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>

Adaptīvās variācijas pastāv arī 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

Aizpildiet

Izmantojiet .flex-fillklasi virknei brāļu elementu, lai piespiestu tos platumos, kas vienādi ar to saturu (vai vienādos platumos, ja to saturs nepārsniedz to apmales lodziņus), vienlaikus aizņemot visu pieejamo horizontālo vietu.

Flex prece ar lielu saturu
Flex prece
Flex prece
<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>

Adaptīvās variācijas pastāv arī flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Augt un sarukt

Izmantojiet .flex-grow-*utilītas, lai pārslēgtu elastīga vienuma spēju augt, lai aizpildītu pieejamo vietu. Tālāk esošajā piemērā .flex-grow-1elementi izmanto visu pieejamo vietu, vienlaikus nodrošinot atlikušajiem diviem elastīgajiem elementiem nepieciešamo vietu.

Flex prece
Flex prece
Trešais elastīgais elements
<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>

Izmantojiet .flex-shrink-*utilītprogrammas, lai vajadzības gadījumā pārslēgtu elastīga vienuma spēju samazināties. Tālāk esošajā piemērā otrais elastīgais vienums ar .flex-shrink-1ir spiests ietīt tā saturu uz jaunu rindiņu, “sarukt”, lai būtu vairāk vietas iepriekšējam elastīgajam vienumam ar .w-100.

Flex prece
Flex prece
<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>

Adaptīvās variācijas pastāv arī flex-growun 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

Automātiskās piemales

Flexbox var paveikt dažas satriecošas lietas, ja sajaucat elastīgo līdzinājumu ar automātiskajām piemalēm. Tālāk ir parādīti trīs piemēri elastīgu vienumu vadīšanai, izmantojot automātiskās piemales: noklusējuma (bez automātiskās piemales), divu vienumu bīdīšana pa labi ( .me-auto) un divu vienumu bīdīšana pa kreisi ( .ms-auto).

Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>

Ar izlīdzināšanas vienumiem

Vertikāli pārvietojiet vienu elastīgu vienumu konteinera augšpusē vai apakšā, sajaucot align-items, flex-direction: columnun margin-top: autovai margin-bottom: auto.

Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<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>

Aptinums

Mainiet elastīgo priekšmetu iesaiņošanas veidu elastīgā konteinerā. Izvēlieties iesaiņošanu bez vispār (pārlūkprogrammas noklusējuma iestatījums) ar .flex-nowrap, iesaiņošanu ar .flex-wrapvai apgriezto ietīšanu ar .flex-wrap-reverse.

Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<div class="d-flex flex-nowrap">
  ...
</div>
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<div class="d-flex flex-wrap">
  ...
</div>
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
Flex prece
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Adaptīvās variācijas pastāv arī 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

Pasūtiet

Mainiet noteiktu elastīgo vienumu vizuālo secību, izmantojot dažas orderutilītas. Mēs piedāvājam tikai opcijas, lai preci izveidotu pirmo vai pēdējo, kā arī atiestatīšanu, lai izmantotu DOM pasūtījumu. Tā kā orderjebkura vesela skaitļa vērtība ir no 0 līdz 5, pievienojiet pielāgotu CSS, lai iegūtu visas nepieciešamās papildu vērtības.

Pirmā elastīgā prece
Otrais elastīgais elements
Trešais elastīgais elements
<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>

Adaptīvās variācijas pastāv arī 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

Additionally there are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 6, respectively.

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

Align content

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

Heads up! This property has no effect on single rows of flex items.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive variations also exist for 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Media object

Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.

Placeholder Image
This is some content from a media component. You can replace this with any content and adjust it as needed.
<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>

And say you want to vertically center the content next to the image:

Placeholder Image
This is some content from a media component. You can replace this with any content and adjust it as needed.
<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 utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "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
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "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,
      ),
    ),