Source

Flex

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!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Mi estas enlinia flexbox-ujo!
<div class="d-inline-flex p-2 bd-highlight">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

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

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

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

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, aŭ around.

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>

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

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

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

Plenigu

Uzu la .flex-fillklason sur serio de gefrataj elementoj por devigi ilin en egalajn larĝojn dum okupas la tutan disponeblan horizontalan spacon. Precipe utila por egallarĝa, aŭ pravigita, navigado.

Flex ero
Flex ero
Flex ero
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">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

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

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

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

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 ( .mr-auto), kaj puŝante du erojn maldekstren ( .ml-auto).

Bedaŭrinde, IE10 kaj IE11 ne taŭge subtenas aŭtomatajn randojn sur flekseblaj eroj, kies gepatro havas ne-defaŭltan justify-contentvaloron. Vidu ĉi tiun StackOverflow-respondon por pliaj detaloj.

Flex ero
Flex ero
Flex ero
Flex ero
Flex ero
Flex ero
Flex ero
Flex ero
Flex ero
<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="mr-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="ml-auto p-2 bd-highlight">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
<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>

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

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. Kiel orderprenas ajnan entjeran valoron (ekz, 5), aldonu kutiman CSS por iuj aldonaj valoroj bezonataj.

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

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

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