Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához

Gyorsan kezelheti a rácsoszlopok elrendezését, igazítását és méretezését, a navigációt, az összetevőket és egyebeket a rugalmas flexbox segédprogramok teljes készletével. Bonyolultabb megvalósításokhoz egyéni CSS-re lehet szükség.

Engedélyezze a rugalmas viselkedést

Segédprogramokkal flexbox display-tárolót hozhat létre, és a közvetlen gyermekelemeket flex elemekké alakíthatja. A flexibilis konténerek és cikkek további flexibilis tulajdonságokkal tovább módosíthatók.

Flexbox konténer vagyok!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Inline flexbox konténer vagyok!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Léteznek reszponzív variációk a .d-flexés számára is .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

Irány

Állítsa be a hajlékony elemek irányát egy hajlékony tárolóban irányjelző segédprogramokkal. A legtöbb esetben itt elhagyhatja a vízszintes osztályt, mivel a böngésző alapértelmezett beállítása row. Előfordulhat azonban olyan helyzetekkel, amikor kifejezetten be kellett állítania ezt az értéket (például adaptív elrendezések).

Használja .flex-rowa vízszintes irány beállításához (a böngésző alapértelmezett beállítása), vagy .flex-row-reversea vízszintes irány elindításához az ellenkező oldalról.

1. rugalmas tétel
2. rugalmas tétel
3. rugalmas tétel
1. rugalmas tétel
2. rugalmas tétel
3. rugalmas tétel
<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>

Használja .flex-columna függőleges irány beállításához, vagy .flex-column-reversea függőleges irány elindításához az ellenkező oldalról.

1. rugalmas tétel
2. rugalmas tétel
3. rugalmas tétel
1. rugalmas tétel
2. rugalmas tétel
3. rugalmas tétel
<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>

Reszponzív variációk is léteznek a 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

Indokolja a tartalmat

Használjon justify-contentsegédprogramokat a flexbox tárolókon a hajlékony elemek igazításának módosításához a fő tengelyen (az x tengely a kezdéshez, az y tengely, ha flex-direction: column). Válasszon a start(böngésző alapértelmezett), end, center, between, around, vagy közül evenly.

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

Reszponzív variációk is léteznek a 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

Elemek igazítása

Használjon align-itemssegédprogramokat a flexbox tárolókon a flex elemek igazításának módosításához a kereszttengelyen (az y tengely a kezdéshez, az x tengely, ha flex-direction: column). Válasszon a következők közül: start, end, center, baselinevagy stretch(a böngésző alapértelmezett beállítása).

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

Reszponzív variációk is léteznek a 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

Igazítsd magad

Használjon align-selfsegédprogramokat a flexbox elemeken, hogy egyénileg módosítsa az igazításukat a kereszttengelyen (az y tengely a kezdéshez, az x tengely, ha flex-direction: column). Válasszon a következő lehetőségek közül align-items: start, end, center, baseline, vagy stretch(a böngésző alapértelmezése).

Flex elem
Igazított rugalmas elem
Flex elem
Flex elem
Igazított rugalmas elem
Flex elem
Flex elem
Igazított rugalmas elem
Flex elem
Flex elem
Igazított rugalmas elem
Flex elem
Flex elem
Igazított rugalmas elem
Flex elem
<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>

Reszponzív variációk is léteznek a 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ölt

Használja az .flex-fillosztályt egy sor testvérelemen, hogy tartalmukkal megegyező szélességűre kényszerítse őket (vagy egyenlő szélességűre, ha a tartalom nem haladja meg a szegélydobozukat), miközben az összes rendelkezésre álló vízszintes helyet elfoglalja.

Flex elem sok tartalommal
Flex elem
Flex elem
<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>

Reszponzív variációk is léteznek a flex-fill.

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

Növekszik és zsugorodik

Segédprogramokkal .flex-grow-*kapcsolja be a rugalmas elem azon képességét, hogy a rendelkezésre álló helyet betöltse. Az alábbi példában az .flex-grow-1elemek az összes rendelkezésre álló helyet felhasználják, miközben a fennmaradó két rugalmas elemnek megengedik a szükséges helyet.

Flex elem
Flex elem
Harmadik flex elem
<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>

Segédprogramokkal .flex-shrink-*állítsa be a flexibilis elem zsugorítási képességét, ha szükséges. Az alábbi példában a második flexiós elem (-vel .flex-shrink-1) kénytelen egy új sorba tördelni a tartalmát, „zsugorodva”, hogy több hely maradjon az előző flexibilis elem számára .w-100.

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

Léteznek reszponzív variációk a flex-growés számára is 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

Automatikus margók

A Flexbox egészen fantasztikus dolgokra képes, ha a flexibilis igazításokat az automatikus margókkal keveri. Az alábbiakban három példa látható a rugalmas elemek automatikus margókkal történő vezérlésére: alapértelmezett (nincs automatikus margó), két elem jobbra .me-autotolása ( ) és két elem balra tolása ( .ms-auto).

Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>

Igazítási elemekkel

Függőlegesen mozgassa az egyik hajlékony elemet egy tartály tetejére vagy aljára a align-items, flex-direction: columnés margin-top: autovagy a keverésével margin-bottom: auto.

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

Betakar

Módosítsa azt, hogy a rugalmas elemek hogyan csomagolják be a rugalmas tárolót. Válasszon a törlés nélküli tördelési lehetőségek közül (a böngésző alapértelmezése) a -val .flex-nowrap, a tördelése -vel .flex-wrapvagy a fordított tördelési lehetőség közül .flex-wrap-reverse.

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

Reszponzív variációk is léteznek a 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

Rendelés

Egy maroknyi segédprogrammal módosíthatja az egyes rugalmas elemek vizuális sorrendjét. orderCsak a tétel első vagy utolsó elkészítésére, valamint a DOM-rendelés használatához való visszaállításra biztosítunk lehetőséget. Mivel orderbármely 0 és 5 közötti egész számot vesz igénybe, adjon meg egyéni CSS-t a további szükséges értékekhez.

Első flex elem
Második rugalmas elem
Harmadik flex elem
<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>

Reszponzív variációk is léteznek a 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

Ezenkívül vannak olyan reszponzív .order-firstés .order-lastosztályok is, amelyek megváltoztatják az orderelemet a order: -1és a alkalmazásával 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

Tartalom igazítása

Használjon align-contentsegédprogramokat a flexbox tárolókon a flex elemek egymáshoz igazításához a kereszttengelyen. Válasszon a start(böngésző alapértelmezett), end, center, between, around, vagy közül stretch. E segédprogramok bemutatása érdekében betartattuk flex-wrap: wrapés megnöveltük a rugalmas elemek számát.

Fel a fejjel! Ez a tulajdonság nincs hatással a rugalmas elemek egysorára.

Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<div class="d-flex align-content-end flex-wrap">...</div>
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<div class="d-flex align-content-center flex-wrap">...</div>
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<div class="d-flex align-content-between flex-wrap">...</div>
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<div class="d-flex align-content-around flex-wrap">...</div>
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
Flex elem
<div class="d-flex align-content-stretch flex-wrap">...</div>

Reszponzív variációk is léteznek a 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Médiaobjektum

A médiaobjektum-összetevőt szeretné replikálni a Bootstrap 4-ből? Készítse el pillanatok alatt újra néhány rugalmas segédprogrammal, amelyek még nagyobb rugalmasságot és testreszabást tesznek lehetővé, mint korábban.

Placeholder Image
Ez egy tartalom egy médiakomponensből. Ezt bármilyen tartalommal helyettesítheti, és szükség szerint módosíthatja.
<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>

Tegyük fel, hogy függőlegesen szeretné középre helyezni a tartalmat a kép mellett:

Placeholder Image
Ez egy tartalom egy médiakomponensből. Ezt bármilyen tartalommal helyettesítheti, és szükség szerint módosíthatja.
<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

Utilities API

A Flexbox segédprogramok a segédprogramok API-jában vannak deklarálva scss/_utilities.scss. Ismerje meg a segédprogramok API használatát.

    "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
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "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,
      ),
    ),