Flex
Saate kiiresti hallata ruudustiku veergude paigutust, joondamist ja suuruse määramist, navigeerimist, komponente ja muud tundlike paindlike utiliitide täieliku komplekti abil. Keerulisemate rakenduste jaoks võib olla vajalik kohandatud CSS.
Lubage paindlik käitumine
Rakendage display
utiliite, et luua flexbox-konteiner ja muuta otsesed lasteelemendid paindlikeks üksusteks. Flex-konteinereid ja esemeid saab täiendavate paindumisomadustega veelgi muuta.
<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>
Kohalikud variatsioonid on olemas ka .d-flex
ja jaoks .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
Suund
Määrake painduvate esemete suund painduvas mahutis koos suunautiliitidega. Enamikul juhtudel võite horisontaalse klassi siin välja jätta, kuna brauseri vaikeseade on row
. Siiski võite ette tulla olukordi, kus peate selle väärtuse selgesõnaliselt määrama (nt kohanemisvõimelised paigutused).
Kasutage .flex-row
horisontaalsuuna määramiseks (brauseri vaikeseade) või .flex-row-reverse
horisontaalsuuna alustamiseks vastasküljelt.
<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>
Kasutage .flex-column
vertikaalsuuna määramiseks või vertikaalsuuna .flex-column-reverse
alustamiseks vastasküljelt.
<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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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
Põhjendage sisu
Kasutage justify-content
flexboxi konteinerite utiliite, et muuta painduvate üksuste joondust peateljel (alustamiseks x-telg, y-telg, kui flex-direction: column
). Valige start
(brauseri vaikeseade), end
, center
, between
, või 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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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
Joondage üksused
Kasutage align-items
flexbox-konteinerite utiliite, et muuta painduvate üksuste joondust ristteljel (alustaks y-telg, kui telg y-telg flex-direction: column
). Valige start
, end
, center
, baseline
või stretch
(brauseri vaikeseade).
<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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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
Joonda ennast
Kasutage align-self
flexboxi üksuste utiliite, et muuta nende joondust ristteljel individuaalselt (alustaks y-telg, kui telg y-telg flex-direction: column
). Valige samade valikute hulgast nagu align-items
, start
, end
, center
või baseline
( stretch
brauseri vaikeseade).
<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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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
Täida
Kasutage .flex-fill
klassi sõsarelementide seeria puhul, et sundida need laiustele, mis on võrdsed nende sisuga (või võrdseteks laiusteks, kui nende sisu ei ületa nende ääriseid), võttes samal ajal kogu olemasoleva horisontaalse ruumi.
<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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Kasvada ja kahanevad
Kasutage .flex-grow-*
utiliite, et muuta painduva üksuse võime kasvada, et täita saadaolevat ruumi. Allolevas näites kasutavad .flex-grow-1
elemendid kogu olemasolevat ruumi, jättes ülejäänud kahele painduvale elemendile vajaliku ruumi.
<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>
Kasutage .flex-shrink-*
utiliite, et muuta painduva elemendi võime vajadusel kahaneda. Allolevas näites on teine painduv element, millel .flex-shrink-1
on , sunnitud mähkima oma sisu uuele reale, „kahanedes”, et jätta rohkem ruumi eelmisele painduvale elemendile, millel on .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>
Kohalikud variatsioonid on olemas ka flex-grow
ja jaoks 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
Automaatsed veerised
Flexbox saab teha päris vingeid asju, kui segate painduvaid joondusi automaatsete veeristega. Allpool on kolm näidet painduvate üksuste juhtimisest automaatsete veeriste kaudu: vaikimisi (automaatne veeris puudub), kahe üksuse lükkamine paremale ( .mr-auto
) ja kahe üksuse lükkamine vasakule ( .ml-auto
).
Kahjuks ei toeta IE10 ja IE11 korralikult automaatseid veerisid paindlikel üksustel, mille põhiväärtus ei ole vaikeväärtus justify-content
. Lisateavet leiate sellest StackOverflow vastusest .
<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>
Joondatavate üksustega
Liigutage üks painduv element vertikaalselt konteineri üla- või alaossa, segades align-items
, flex-direction: column
ja margin-top: auto
või 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>
Mähi
Muutke seda, kuidas painduvad esemed painduvasse konteinerisse pakitakse. Valige mähiseta (brauseri vaikeseade) .flex-nowrap
, mähkimise .flex-wrap
või vastupidise mähkimise vahel .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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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
Telli
Muutke konkreetsete painduvate üksuste visuaalset järjekorda käputäie order
utiliitidega. Pakume valikuid ainult üksuse esimeseks või viimaseks tegemiseks, samuti lähtestamiseks DOM-i tellimuse kasutamiseks. Nagu order
iga täisarvu väärtus (nt 5
), lisage vajalike lisaväärtuste jaoks kohandatud CSS.
<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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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
Joondage sisu
Kasutage align-content
painduvate konteinerite utiliite, et joondada painduvad elemendid ristteljel . Valige start
(brauseri vaikeseade), end
, center
, between
, around
, või stretch
. Nende utiliitide demonstreerimiseks oleme jõustanud flex-wrap: wrap
ja suurendanud paindlike üksuste arvu.
Pea püsti! See omadus ei mõjuta painduvate üksuste üksikuid ridu.
<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>
Tunnuse jaoks on olemas ka reageerivad variatsioonid 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