Source

Flex

Ātri pārvaldiet režģa kolonnu izkārtojumu, izlīdzināšanu un izmēru noteikšanu, navigāciju, komponentus un daudz ko citu, izmantojot pilnu adaptīvo flexbox utilītu komplektu. Sarežģītākām ieviešanām var būt nepieciešams pielāgots CSS.

Iespējot elastīgu uzvedību

Lietojiet displayutilītas, lai izveidotu flexbox konteineru un pārveidotu tiešos bērnu elementus elastīgos priekšmetos. Flex konteinerus un priekšmetus var vēl vairāk pārveidot ar papildu elastīgām īpašībām.

Es esmu flexbox konteiners!

<div class="d-flex p-2">I'm a flexbox container!</div>

Es esmu iekļauts flexbox konteiners!

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Adaptīvās variācijas pastāv arī .d-flexun .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

Virziens

Iestatiet elastīgo priekšmetu virzienu elastīgā konteinerā ar virziena utilītiem. Vairumā gadījumu jūs varat izlaist horizontālo klasi, jo pārlūkprogrammas noklusējuma iestatījums ir row. Tomēr var rasties situācijas, kad šī vērtība ir skaidri jāiestata (piemēram, adaptīvi izkārtojumi).

Izmantojiet .flex-row, lai iestatītu horizontālo virzienu (pārlūka noklusējuma iestatījums) vai .flex-row-reversesāktu horizontālo virzienu no pretējās puses.

Flex vienums 1

Flex vienums 2

Flex vienums 3

Flex vienums 1

Flex vienums 2

Flex vienums 3

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Izmantojiet .flex-column, lai iestatītu vertikālo virzienu vai .flex-column-reversesāktu vertikālo virzienu no pretējās puses.

Flex vienums 1

Flex vienums 2

Flex vienums 3

Flex vienums 1

Flex vienums 2

Flex vienums 3

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Adaptīvās variācijas pastāv arī 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

Pamatojiet saturu

Izmantojiet justify-contentutilītprogrammas flexbox konteineros, lai mainītu elastīgo vienumu izlīdzināšanu uz galvenās ass (sākt ar x ass, ja y ass flex-direction: column). Izvēlieties no start(pārlūka noklusējuma), end, center, between, vai around.

Flex prece

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

Adaptīvās variācijas pastāv arī 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

Izlīdziniet vienumus

Izmantojiet align-itemsutilītprogrammas flexbox konteineros, lai mainītu elastīgo vienumu izlīdzināšanu uz šķērsass (sākumam ar y ass, ja flex-direction: column) ass. Izvēlieties no start, end, center, baseline, vai stretch(pārlūka noklusējuma iestatījumi).

Flex prece

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

Adaptīvās variācijas pastāv arī 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

Saskaņot sevi

Izmantojiet align-selfutilītprogrammas flexbox vienumiem, lai individuāli mainītu to izlīdzināšanu uz šķērsass (sākt ar y ass, ja flex-direction: column) ass. Izvēlieties kādu no tām pašām opcijām kā align-items: start, end, center, baseline, vai stretch(pārlūka noklusējuma iestatījumi).

Flex prece

Izlīdzināts elastīgs vienums

Flex prece

Izlīdzināts elastīgs vienums

Flex prece

Izlīdzināts elastīgs vienums

Flex prece

Izlīdzināts elastīgs vienums

Flex prece

Izlīdzināts elastīgs vienums

Flex prece

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

Adaptīvās variācijas pastāv arī 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

Automātiskās piemales

Flexbox var paveikt dažas satriecošas lietas, ja sajaucat elastīgo līdzinājumu ar automātiskajām piemalēm. Tālāk ir parādīti trīs piemēri elastīgu vienumu vadīšanai, izmantojot automātiskās piemales: noklusējuma (bez automātiskās piemales), divu vienumu bīdīšana pa labi ( .mr-auto) un divu vienumu bīdīšana pa kreisi ( .ml-auto).

Diemžēl IE10 un IE11 pareizi neatbalsta automātiskās piemales elastīgiem vienumiem, kuru vecākvērtība nav noklusējuma justify-contentvērtība. Plašāku informāciju skatiet šajā StackOverflow atbildē .

Flex prece

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

Ar izlīdzināšanas vienumiem

Vertikāli pārvietojiet vienu elastīgu vienumu konteinera augšpusē vai apakšā, sajaucot align-items, flex-direction: columnun margin-top: autovai margin-bottom: auto.

Flex prece

<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Aptinums

Mainiet elastīgo priekšmetu iesaiņošanas veidu elastīgā konteinerā. Izvēlieties iesaiņošanu bez vispār (pārlūkprogrammas noklusējuma iestatījums) ar .flex-nowrap, iesaiņošanu ar .flex-wrapvai apgriezto ietīšanu ar .flex-wrap-reverse.

Flex prece

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

Flex prece

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

Flex prece

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

Adaptīvās variācijas pastāv arī 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

Pasūtiet

Mainiet noteiktu elastīgo vienumu vizuālo secību, izmantojot dažas orderutilītas. Mēs piedāvājam tikai opcijas, lai preci izveidotu pirmo vai pēdējo, kā arī atiestatīšanu, lai izmantotu DOM pasūtījumu. Tāpat kā orderjebkura vesela skaitļa vērtība (piemēram, 5), pievienojiet pielāgotu CSS visām nepieciešamajām papildu vērtībām.

Pirmā elastīgā prece

Otrais elastīgais elements

Trešais elastīgais elements

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Adaptīvās variācijas pastāv arī 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

Saskaņot saturu

Izmantojiet align-contentutilītprogrammas flexbox konteineros, lai saskaņotu elastīgos vienumus kopā uz šķērsass. Izvēlieties no start(pārlūka noklusējuma), end, center, between, around, vai stretch. Lai demonstrētu šīs utilītas, esam ieviesuši flex-wrap: wrapun palielinājuši elastīgo vienumu skaitu.

Uzmanību! Šis īpašums neietekmē atsevišķas elastīgu vienumu rindas.

Flex prece

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

Flex prece

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

Flex prece

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

Flex prece

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

Flex prece

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

Flex prece

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

Adaptīvās variācijas pastāv arī 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