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.

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

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.

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

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

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

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

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

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

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ą erdvę. Toliau pateiktame pavyzdyje .flex-grow-1elementai išnaudoja visą turimą erdvę, o likusiems dviem lankstiems elementams paliekama reikiama erdvė.

<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-*komunalines 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.

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

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

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

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

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

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

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

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

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