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.
Rakendage display
utiliite, et luua flexbox-konteiner ja muuta otsesed lasteelemendid paindlikeks üksusteks. Flex-konteinereid ja esemeid saab täiendavate paindumisomadustega veelgi muuta.
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
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.
Kasutage .flex-column
vertikaalsuuna määramiseks või vertikaalsuuna .flex-column-reverse
alustamiseks vastasküljelt.
Kohalikud variatsioonid on olemas ka jaoks 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
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
.
Kohalikud variatsioonid on olemas ka jaoks 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
Kasutage align-items
painduvate konteinerite utiliite, et muuta painduvate üksuste joondust ristteljel (algustamiseks y-telg, kui telg y-telg flex-direction: column
). Valige start
, end
, center
, baseline
või stretch
(brauseri vaikeseade).
Kohalikud variatsioonid on olemas ka jaoks 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
Kasutage align-self
flexboxi üksuste puhul utiliite, et muuta individuaalselt nende joondust ristteljel (alustaks y-telg, kui teljel y-telg flex-direction: column
). Valige samade valikute hulgast nagu align-items
, start
, end
, center
, baseline
või stretch
(brauseri vaikeseade).
Kohalikud variatsioonid on olemas ka jaoks 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
Kasutage .flex-fill
klassi õdede elementide seeria puhul, et sundida need võrdseteks laiusteks, hõivates samal ajal kogu olemasoleva horisontaalse ruumi. Eriti kasulik võrdse laiusega või õigustatud navigeerimiseks.
Kohalikud variatsioonid on olemas ka jaoks flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Kasutage .flex-grow-*
utiliite, et muuta painduva elemendi 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.
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 selle sisu uuele reale, „kahanedes”, et jätta rohkem ruumi eelmisele painduvale elemendile, millel on .w-100
.
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
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 .
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
.
Muutke seda, kuidas painduvad esemed painduvas mahutis pakitakse. Valige mähiseta (brauseri vaikeseade) .flex-nowrap
, mähkimise .flex-wrap
või vastupidise mähkimise vahel .flex-wrap-reverse
.
Kohalikud variatsioonid on olemas ka jaoks 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
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.
Kohalikud variatsioonid on olemas ka jaoks 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
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 üksikuid painduvate üksuste ridu.
Kohalikud variatsioonid on olemas ka jaoks 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