Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check

Rapide administru la aranĝon, vicigon kaj grandecon de kradaj kolumnoj, navigado, komponantoj kaj pli kun plena serio de respondemaj flekskesto-servaĵoj. Por pli kompleksaj efektivigoj, kutima CSS povas esti necesa.

Ebligu fleksajn kondutojn

Apliki displayilojn por krei flekskestujon kaj transformi rektajn infanajn elementojn en flekseblajn erojn. Fleksaj ujoj kaj aĵoj povas esti modifitaj plu kun pliaj fleksaj propraĵoj.

Mi estas flexbox-ujo!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Mi estas enlinia flexbox-ujo!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Respondema variaĵoj ankaŭ ekzistas por .d-flexkaj .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

Direkto

Fiksu la direkton de flekseblaj eroj en fleksebla ujo kun direktaj utilecoj. Plejofte vi povas preterlasi la horizontalan klason ĉi tie ĉar la defaŭlta retumilo estas row. Tamen, vi povas renkonti situaciojn kie vi bezonis eksplicite agordi ĉi tiun valoron (kiel respondemaj aranĝoj).

Uzu .flex-rowpor agordi horizontalan direkton (la retumilo defaŭlta), aŭ .flex-row-reversepor komenci la horizontalan direkton de la kontraŭa flanko.

Fleksaĵo 1
Fleksa ero 2
Fleksa ero 3
Fleksaĵo 1
Fleksa ero 2
Fleksa ero 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>

Uzu .flex-columnpor agordi vertikalan direkton, aŭ .flex-column-reversepor komenci la vertikalan direkton de la kontraŭa flanko.

Fleksaĵo 1
Fleksa ero 2
Fleksa ero 3
Fleksaĵo 1
Fleksa ero 2
Fleksa ero 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>

Respondema variaĵoj ankaŭ ekzistas por 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

Pravigi enhavon

Uzu justify-contentilojn sur flexbox-ujoj por ŝanĝi la vicigon de flekseblaj eroj sur la ĉefa akso (la x-akso por komenci, y-akso se flex-direction: column). Elektu el start(defaŭlta retumilo), end, center, between, around, aŭ evenly.

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

Respondema variaĵoj ankaŭ ekzistas por 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

Vicigi erojn

Uzu align-itemsilojn sur flekskesto-ujoj por ŝanĝi la vicigon de flekseblaj eroj sur la krucakso (la y-akso por komenci, x-akso se flex-direction: column). Elektu el start, end, center, baseline, aŭ stretch(defaŭlta retumilo).

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

Respondema variaĵoj ankaŭ ekzistas por 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

Vicigi sin

Uzu align-selfilojn sur flekskestaĵoj por individue ŝanĝi ilian vicigon sur la krucakso (la y-akso por komenci, x-akso se flex-direction: column). Elektu el la samaj opcioj kiel align-items: start, end, center, baseline, aŭ stretch(defaŭlta retumilo).

Flex ero
Vicigita fleksebla ero
Flex ero
Flex ero
Vicigita fleksebla ero
Flex ero
Flex ero
Vicigita fleksebla ero
Flex ero
Flex ero
Vicigita fleksebla ero
Flex ero
Flex ero
Vicigita fleksebla ero
Flex ero
<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>

Respondema variaĵoj ankaŭ ekzistas por 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

Plenigu

Uzu la .flex-fillklason sur serio de gefrataj elementoj por devigi ilin en larĝojn egalajn al ilia enhavo (aŭ egalajn larĝojn se ilia enhavo ne superas iliajn limskatolojn) okupante la tutan disponeblan horizontalan spacon.

Fleksa objekto kun multe da enhavo
Flex ero
Flex ero
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>

Respondema variaĵoj ankaŭ ekzistas por flex-fill.

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

Kreski kaj ŝrumpi

Uzu .flex-grow-*ilojn por ŝanĝi la kapablon de fleksebla objekto kreski por plenigi disponeblan spacon. En la malsupra ekzemplo, la .flex-grow-1elementoj uzas la tutan disponeblan spacon, kiun ĝi povas, permesante al la ceteraj du flekseblajn erojn sian necesan spacon.

Flex ero
Flex ero
Tria fleksebla ero
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>

Uzu .flex-shrink-*ilojn por ŝanĝi la kapablon de fleksebla objekto ŝrumpi se necese. En la malsupra ekzemplo, la dua fleksebla ero kun .flex-shrink-1estas devigita envolvi sian enhavon al nova linio, "malgrandiĝanta" por permesi pli da spaco por la antaŭa fleksebla ero kun .w-100.

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

Respondema variaĵoj ankaŭ ekzistas por flex-growkaj 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

Aŭtomataj randoj

Flexbox povas fari kelkajn mirindajn aferojn kiam vi miksas fleksajn alineojn kun aŭtomataj randoj. Montritaj malsupre estas tri ekzemploj de kontrolado de flekseblaj eroj per aŭtomataj marĝenoj: defaŭlte (neniu aŭtomata marĝeno), puŝante du erojn dekstren ( .me-auto), kaj puŝante du erojn maldekstren ( .ms-auto).

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

Kun vic-elementoj

Vertikale movu unu flekseblan objekton al la supro aŭ malsupro de ujo per miksado de align-items, flex-direction: column, kaj margin-top: automargin-bottom: auto.

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

Envolvi

Ŝanĝu kiel flekseblaj eroj envolviĝas en fleksebla ujo. Elektu el neniu envolvado (la retumilo defaŭlta) per .flex-nowrap, envolvi per .flex-wrapaŭ inversa envolvi per .flex-wrap-reverse.

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

Respondema variaĵoj ankaŭ ekzistas por 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

Ordo

Ŝanĝu la vidan ordon de specifaj flekseblaj eroj per manpleno da orderutilecoj. Ni nur provizas eblojn por fari objekton unue aŭ laste, kaj ankaŭ restarigi por uzi la DOM-ordon. Ĉar orderprenas ajnan entjeran valoron de 0 ĝis 5, aldonu kutiman CSS por iuj aldonaj valoroj bezonataj.

Unua fleksebla objekto
Dua fleksebla objekto
Tria fleksebla ero
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>

Respondema variaĵoj ankaŭ ekzistas por 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

Aldone ekzistas ankaŭ respondemaj .order-firstkaj .order-lastklasoj kiuj ŝanĝas la orderde elemento per aplikado order: -1kaj order: 6, respektive.

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

Vicigi enhavon

Uzu align-contentilojn sur flexbox-ujoj por vicigi flekseblajn erojn kune sur la transversa akso. Elektu el start(defaŭlta retumilo), end, center, between, around, aŭ stretch. Por pruvi ĉi tiujn ilojn, ni devigis flex-wrap: wrapkaj pliigis la nombron da flekseblaj eroj.

Atentu! Ĉi tiu posedaĵo ne efikas sur unuopaj vicoj de flekseblaj eroj.

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

Respondema variaĵoj ankaŭ ekzistas por 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

Media objekto

Ĉu vi volas reprodukti la amaskomunikilajn objektokomponentojn de Bootstrap 4? Rekreu ĝin en neniu tempo kun kelkaj flekseblaj iloj, kiuj permesas eĉ pli da fleksebleco kaj personigo ol antaŭe.

Placeholder Image
Ĉi tio estas iu enhavo de amaskomunikila komponanto. Vi povas anstataŭigi ĉi tion per ajna enhavo kaj ĝustigi ĝin laŭbezone.
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>

Kaj diru, ke vi volas vertikale centri la enhavon apud la bildo:

Placeholder Image
Ĉi tio estas iu enhavo de amaskomunikila komponanto. Vi povas anstataŭigi ĉi tion per ajna enhavo kaj ĝustigi ĝin laŭbezone.
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

Utilaĵoj API

Flexbox-utiloj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn API.

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