in English

Flex

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.

Ezen az oldalon

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!

html

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

Inline flexbox konténer vagyok!

html

<div class="d-inline-flex p-2">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

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>

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

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>

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

<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

<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

Igazított rugalmas elem

Flex elem

Igazított rugalmas elem

Flex elem

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

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>

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

Harmadik flex elem

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>

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

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>

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

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>

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

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>

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

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

Flex elem

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

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

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>

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

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

Flex elem

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

Flex elem

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

Flex elem

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

Flex elem

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

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

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.

Ez egy tartalom egy médiakomponensből. Ezt bármilyen tartalommal helyettesítheti, és szükség szerint módosíthatja.

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>

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

Ez egy tartalom egy médiakomponensből. Ezt bármilyen tartalommal helyettesítheti, és szükség szerint módosíthatja.

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

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
    ),
    "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,
      ),
    ),