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 display
priemones, 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-flex
ir .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-row
norėdami nustatyti horizontalią kryptį (naršyklės numatytoji nuostata) arba .flex-row-reverse
pradė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-column
norėdami nustatyti vertikalią kryptį arba .flex-column-reverse
pradė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-fill
klasę 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ą vietą. Toliau pateiktame pavyzdyje .flex-grow-1
elementai 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-*
pagalbines programas, kad perjungtumėte lankstaus elemento galimybę susitraukti. Toliau pateiktame pavyzdyje antrasis lankstus elementas su .flex-shrink-1
yra priverstas apvynioti jo turinį į naują eilutę, „susitraukiant“, 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-grow
ir 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ą .
<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: column
ir margin-top: auto
arba 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-wrap
arba 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ą order
paslaugų. Teikiame tik parinktis, kaip padaryti prekę pirmą arba paskutinę, taip pat iš naujo nustatyti DOM užsakymą. Kaip order
ir 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 programa), end
, center
, between
, around
, arba stretch
. Siekdami parodyti šias paslaugas, pritaikėme flex-wrap: wrap
ir 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-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