Source

Flex

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!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Aš esu „flexbox“ konteineris!
<div class="d-inline-flex p-2 bd-highlight">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

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

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

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

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, arba around.

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>

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

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

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

Užpildykite

Naudokite .flex-fillklasę daugybei giminingų elementų, kad jie būtų vienodo pločio ir užimtų visą turimą horizontalią erdvę. Ypač naudinga naršant vienodo pločio arba lygiagrečiai.

Flex elementas
Flex elementas
Flex elementas
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">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

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

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 perkelti jo turinį į naują eilutę, „susitraukdamas“, kad būtų daugiau vietos ankstesniam lanksčiam elementui su .w-100.

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

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

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ę ( .mr-auto) ir dviejų elementų stūmimas į kairę ( .ml-auto).

Deja, IE10 ir IE11 tinkamai nepalaiko automatinių paraščių lankstiems elementams, kurių pirminė reikšmė nėra numatytoji justify-content. Norėdami gauti daugiau informacijos, žr. šį „StackOverflow“ atsakymą .

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

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

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

Į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ą. Kaip orderir bet kokia sveikojo skaičiaus reikšmė (pvz., 5), pridėkite tinkintą CSS, jei reikia papildomų verčių.

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

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

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