Source

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.

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">I'm a flexbox container!</div>
Inline flexbox konténer vagyok!
<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

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

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

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, vagy közül around.

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>

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

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

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

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 .mr-autotolása ( ) és két elem balra tolása ( .ml-auto).

Sajnos az IE10 és az IE11 nem támogatja megfelelően az automatikus margót azokon a flex elemeken, amelyek szülője nem alapértelmezett justify-contentértékkel rendelkezik. További részletekért tekintse meg ezt a StackOverflow választ .

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

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

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

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. Bármely egész értékhez hasonlóan order(pl. 5), adjon hozzá 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">
  <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-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

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