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.

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

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.

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

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

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

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.

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

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

<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

Aizpildiet

Izmantojiet .flex-fillklasi virknei brāļu elementu, lai piespiestu tos platumos, kas vienādi ar to saturu (vai vienādos platumos, ja to saturs nepārsniedz to apmales lodziņus), vienlaikus aizņemot visu pieejamo horizontālo vietu.

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

Adaptīvās variācijas pastāv arī flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill

Augt un sarukt

Izmantojiet .flex-grow-*utilītprogrammas, lai pārslēgtu elastīga vienuma spēju augt, lai aizpildītu pieejamo vietu. Tālāk esošajā piemērā .flex-grow-1elementi izmanto visu pieejamo vietu, vienlaikus nodrošinot atlikušajiem diviem elastīgajiem elementiem nepieciešamo vietu.

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

Izmantojiet .flex-shrink-*utilītprogrammas, lai vajadzības gadījumā pārslēgtu elastīga vienuma spēju samazināties. Tālāk esošajā piemērā otrais elastīgais vienums ar .flex-shrink-1ir spiests ietīt tā saturu uz jaunu rindiņu, “sarukt”, lai būtu vairāk vietas iepriekšējam elastīgajam vienumam ar .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>

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

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

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

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.

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

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.

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

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

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

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

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.

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

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