Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check

Greitai valdykite tinklelio stulpelių išdėstymą, išlygiavimą ir dydį, naršymą, komponentus ir dar daugiau naudodami visą reaguojančių „flexbox“ paslaugų rinkinį. Sudėtingesniems diegimams gali prireikti pasirinktinio CSS.

Įgalinkite lankstų elgesį

Taikykite displaypriemones, kad sukurtumėte lanksčią dėžutę ir tiesioginius vaikų elementus paverstumėte lanksčiais elementais. Lanksčiuosius konteinerius ir daiktus galima toliau modifikuoti naudojant papildomas lankstumo savybes.

Aš esu „flexbox“ konteineris!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Aš esu „flexbox“ konteineris!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Taip pat yra .d-flexir .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

Kryptis

Nustatykite lanksčių elementų kryptį lanksčiame konteineryje su krypties programomis. Daugeliu atvejų čia galite praleisti horizontalią klasę, nes naršyklės numatytoji reikšmė yra row. Tačiau galite susidurti su situacijomis, kai reikėjo aiškiai nustatyti šią reikšmę (pvz., interaktyvūs išdėstymai).

Naudokite .flex-rownorėdami nustatyti horizontalią kryptį (naršyklės numatytoji nuostata) arba .flex-row-reversepradėti horizontalią kryptį iš priešingos pusės.

1 lankstus elementas
2 lankstus elementas
3 lankstus elementas
1 lankstus elementas
2 lankstus elementas
3 lankstus elementas
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>

Naudokite .flex-columnnorėdami nustatyti vertikalią kryptį arba .flex-column-reversepradėti vertikalią kryptį iš priešingos pusės.

1 lankstus elementas
2 lankstus elementas
3 lankstus elementas
1 lankstus elementas
2 lankstus elementas
3 lankstus elementas
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>

Taip pat yra reaguojančių variantų 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

Pagrįskite turinį

Naudokite justify-content„flexbox“ konteinerių paslaugų programas, kad pakeistumėte lanksčių elementų lygiavimą pagrindinėje ašyje (pradėti x ašimi, y ašimi, jei flex-direction: column). Pasirinkite iš start(naršyklės numatytoji programa), end, center, between, around, arba evenly.

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

Taip pat yra reaguojančių variantų 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

Sulygiuokite elementus

Naudokite align-items„flexbox“ konteinerių paslaugų programas, kad pakeistumėte lanksčių elementų išlygiavimą skersinėje ašyje (pradėti y ašimi, jei flex-direction: column) – x ašimi. Pasirinkite iš start, end, center, baseline, arba stretch(naršyklės numatytoji dalis).

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

Taip pat yra reaguojančių variantų 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

Sulygink save

Naudokite align-self„flexbox“ elementų paslaugų programas, kad individualiai pakeistumėte jų lygiavimą skersinėje ašyje (pradėti y ašimi, jei flex-direction: column) – x ašimi. Pasirinkite iš tų pačių parinkčių kaip align-items: start, end, center, baseline, arba stretch(naršyklės numatytoji nuostata).

Flex elementas
Sulygiuotas lankstus elementas
Flex elementas
Flex elementas
Sulygiuotas lankstus elementas
Flex elementas
Flex elementas
Sulygiuotas lankstus elementas
Flex elementas
Flex elementas
Sulygiuotas lankstus elementas
Flex elementas
Flex elementas
Sulygiuotas lankstus elementas
Flex elementas
<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>

Taip pat yra reaguojančių variantų 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

Užpildykite

Naudokite .flex-fillklasę seserų elementų serijoje, kad priverstumėte juos į plotį, lygų jų turiniui (arba vienodo pločio, jei jų turinys neviršija jų kraštinių laukelių), tuo pačiu užimdami visą turimą horizontalią erdvę.

Flex elementas su daugybe turinio
Flex elementas
Flex elementas
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>

Taip pat yra reaguojančių variantų flex-fill.

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

Augti ir mažėti

Naudokite .flex-grow-*komunalines programas, kad perjungtumėte lankstaus elemento gebėjimą augti, kad užpildytumėte laisvą vietą. Toliau pateiktame pavyzdyje .flex-grow-1elementai išnaudoja visą turimą erdvę, o likusiems dviem lankstiems elementams paliekama reikiama erdvė.

Flex elementas
Flex elementas
Trečias lankstus elementas
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>

Jei reikia, naudokite .flex-shrink-*pagalbines programas, kad perjungtumėte lankstaus elemento galimybę susitraukti. Toliau pateiktame pavyzdyje antrasis lankstus elementas su .flex-shrink-1yra priverstas apvynioti jo turinį į naują eilutę, „susitraukiant“, kad būtų daugiau vietos ankstesniam lanksčiam elementui su .w-100.

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

Taip pat yra flex-growir 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

Automatinės paraštės

„Flexbox“ gali padaryti keletą nuostabių dalykų, kai sumaišote lanksčią lygiavimą su automatinėmis paraštėmis. Toliau pateikiami trys lanksčių elementų valdymo automatinėmis paraštėmis pavyzdžiai: numatytasis (be automatinių paraščių), dviejų elementų stūmimas į dešinę ( .me-auto) ir dviejų elementų stūmimas į kairę ( .ms-auto).

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

Su lygiavimo elementais

Vertikaliai perkelkite vieną lanksčią elementą į konteinerio viršų arba apačią, maišydami align-items, flex-direction: columnir margin-top: autoarba margin-bottom: auto.

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

Apvyniokite

Pakeiskite lanksčių daiktų įvyniojimą į lanksčią talpyklą. Pasirinkite iš viso nevyniojimo (naršyklės numatytasis nustatymas) naudodami .flex-nowrap, apvyniojimą su .flex-wraparba atvirkštinį vyniojimą su .flex-wrap-reverse.

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

Taip pat yra reaguojančių variantų 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

Įsakymas

Pakeiskite vaizdinę konkrečių lanksčių elementų tvarką naudodami keletą orderpaslaugų. Teikiame tik parinktis, kaip padaryti prekę pirmą arba paskutinę, taip pat iš naujo nustatyti DOM užsakymą. Jei orderreikia bet kokios sveikojo skaičiaus vertės nuo 0 iki 5, pridėkite tinkintą CSS, jei reikia papildomų verčių.

Pirmas lankstus elementas
Antras lankstus elementas
Trečias lankstus elementas
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>

Taip pat yra reaguojančių variantų 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

Be to, taip pat yra interaktyvių .order-firstir .order-lastklasių, kurios keičia orderelemento dydį atitinkamai taikydami order: -1ir order: 6.

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

Suderinkite turinį

Naudokite align-content„flexbox“ konteinerių komunalines priemones, kad sulygiuotumėte lankstus elementus skersine ašimi. Pasirinkite iš start(naršyklės numatytoji programa), end, center, between, around, arba stretch. Siekdami parodyti šias paslaugas, pritaikėme flex-wrap: wrapir padidinome lanksčių elementų skaičių.

Galvas aukštyn! Ši savybė neturi įtakos atskiroms lanksčių elementų eilutėms.

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

Taip pat yra reaguojančių variantų 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

Žiniasklaidos objektas

Norite pakartoti medijos objekto komponentą iš „Bootstrap 4“? Atkurkite jį akimirksniu naudodami keletą lanksčių paslaugų, kurios suteikia dar daugiau lankstumo ir pritaikymo nei anksčiau.

Placeholder Image
Tai tam tikras turinys iš medijos komponento. Galite jį pakeisti bet kokiu turiniu ir prireikus pakoreguoti.
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>

Ir tarkime, kad norite vertikaliai centruoti turinį šalia vaizdo:

Placeholder Image
Tai tam tikras turinys iš medijos komponento. Galite jį pakeisti bet kokiu turiniu ir prireikus pakoreguoti.
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“ komunalinės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų 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
    ),
    "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,
      ),
    ),