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.

Sellel lehel

Lubage paindlik käitumine

Rakendage displayutiliite, et luua flexbox-konteiner ja muuta otsesed lasteelemendid paindlikeks üksusteks. Flex-konteinereid ja esemeid saab täiendavate paindumisomadustega veelgi muuta.

Ma olen flexbox konteiner!

html

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

Olen inline flexbox konteiner!

html

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

Kohalikud variatsioonid on olemas ka .d-flexja 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
.d-xxl-flex
.d-xxl-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-rowhorisontaalsuuna määramiseks (brauseri vaikeseade) või .flex-row-reversehorisontaalsuuna alustamiseks vastasküljelt.

Paindlik element 1

Paindlik element 2

Paindlik element 3

Paindlik element 1

Paindlik element 2

Paindlik element 3

html

<div class="d-flex flex-row mb-3">
  <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>

Kasutage .flex-columnvertikaalsuuna määramiseks või vertikaalsuuna .flex-column-reversealustamiseks vastasküljelt.

Paindlik element 1

Paindlik element 2

Paindlik element 3

Paindlik element 1

Paindlik element 2

Paindlik element 3

html

<div class="d-flex flex-column mb-3">
  <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>

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
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Põhjendage sisu

Kasutage justify-contentflexboxi konteinerite utiliite, et muuta painduvate üksuste joondust peateljel (alustamiseks x-telg, y-telg, kui flex-direction: column). Valige start(brauseri vaikeseade), end, center, between, around, või evenly.

Paindlik toode

<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>
<div class="d-flex justify-content-evenly">...</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-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Joondage üksused

Kasutage align-itemsflexbox-konteinerite utiliite, et muuta painduvate üksuste joondust ristteljel (alustaks y-telg, kui telg y-telg flex-direction: column). Valige start, end, center, baselinevõi stretch(brauseri vaikeseade).

Paindlik toode

<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
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Joonda ennast

Kasutage align-selfflexboxi ü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, centervõi baseline( stretchbrauseri vaikeseade).

Paindlik toode

Joondatud painduv element

Paindlik toode

Joondatud painduv element

Paindlik toode

Joondatud painduv element

Paindlik toode

Joondatud painduv element

Paindlik toode

Joondatud painduv element

Paindlik toode

<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
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Täida

Kasutage .flex-fillklassi 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.

Flex-kaup, millel on palju sisu

Paindlik toode

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
.flex-xxl-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-1elemendid kogu olemasolevat ruumi, jättes ülejäänud kahele painduvale elemendile vajaliku ruumi.

Paindlik toode

Kolmas painduv element

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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-1on , sunnitud mähkima oma sisu uuele reale, „kahanedes”, et jätta rohkem ruumi eelmisele painduvale elemendile, millel on .w-100.

Paindlik toode

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Kohalikud variatsioonid on olemas ka flex-growja 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
.flex-xxl-{grow|shrink}-0
.flex-xxl-{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 ( .me-auto) ja kahe üksuse lükkamine vasakule ( .ms-auto).

Paindlik toode

html

<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Joondatavate üksustega

Liigutage üks painduv element vertikaalselt konteineri üla- või alaossa, segades align-items, flex-direction: columnja margin-top: autovõi margin-bottom: auto.

Paindlik toode

html

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

Mähi

Muutke seda, kuidas painduvad esemed painduvasse konteinerisse pakitakse. Valige mähiseta (brauseri vaikeseade) .flex-nowrap, mähkimise .flex-wrapvõi vastupidise mähkimise vahel .flex-wrap-reverse.

Paindlik toode

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

Paindlik toode

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

Paindlik toode

<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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Telli

Muutke konkreetsete painduvate üksuste visuaalset järjekorda käputäie orderutiliitidega. Pakume valikuid ainult üksuse esimeseks või viimaseks tegemiseks, samuti lähtestamiseks DOM-i tellimuse kasutamiseks. Mis ordertahes täisarvu väärtuseks 0 kuni 5, lisage kohandatud CSS vajalike lisaväärtuste jaoks.

Esimene painduv ese

Teine painduv element

Kolmas painduv element

html

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

Tunnuse jaoks on olemas ka reageerivad variatsioonid order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Lisaks on olemas ka reageerivad .order-firstja .order-lastklassid, mis muudavad orderelemendi väärtust, rakendades vastavalt order: -1ja order: 6.

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Joondage sisu

Kasutage align-contentpainduvate 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: wrapja suurendanud paindlike üksuste arvu.

Pea püsti! See omadus ei mõjuta painduvate üksuste üksikuid ridu.

Paindlik toode

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

Paindlik toode

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

Paindlik toode

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

Paindlik toode

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

Paindlik toode

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

Paindlik toode

<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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Meedia objekt

Kas soovite kopeerida meediumiobjekti komponenti Bootstrap 4-st? Looge see hetkega uuesti mõne paindliku utiliidi abil, mis võimaldavad senisest veelgi rohkem paindlikkust ja kohandamist.

See on osa sisust meediakomponendist. Saate selle asendada mis tahes sisuga ja kohandada seda vastavalt vajadusele.

html

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Ja öelge, et soovite sisu vertikaalselt pildi kõrval tsentreerida:

See on osa sisust meediakomponendist. Saate selle asendada mis tahes sisuga ja kohandada seda vastavalt vajadusele.

html

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

Utiliidide API

Flexboxi utiliidid on deklareeritud meie utiliitide API-s aastal scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),