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 display
ilojn 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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Respondema variaĵoj ankaŭ ekzistas por .d-flex
kaj .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-row
por agordi horizontalan direkton (la retumilo defaŭlta), aŭ .flex-row-reverse
por komenci la horizontalan direkton de la kontraŭa flanko.
<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-column
por agordi vertikalan direkton, aŭ .flex-column-reverse
por komenci la vertikalan direkton de la kontraŭa flanko.
<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-content
ilojn 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
.
<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-items
ilojn 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).
<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-self
ilojn sur flekskesto-eroj 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).
<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-fill
klason 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.
<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>
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-1
elementoj uzas la tutan disponeblan spacon, kiun ĝi povas, permesante al la ceteraj du flekseblajn erojn sian necesan spacon.
<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-1
estas devigita envolvi sian enhavon al nova linio, "malgrandiĝanta" por permesi pli da spaco por la antaŭa fleksebla ero kun .w-100
.
<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-grow
kaj 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ŝi du erojn dekstren ( .mr-auto
), kaj puŝi 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-content
valoron. Vidu ĉi tiun StackOverflow-respondon por pliaj detaloj.
<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: auto
aŭ margin-bottom: auto
.
<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-wrap
aŭ inversa envolvi per .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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 order
utilecoj. Ni nur provizas eblojn por fari objekton unue aŭ laste, kaj ankaŭ restarigi por uzi la DOM-ordon. Kiel order
prenas ajnan entjeran valoron (ekz, 5
), aldonu kutiman CSS por iuj aldonaj valoroj bezonataj.
<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-content
ilojn 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: wrap
kaj pliigis la nombron da flekseblaj eroj.
Atentu! Ĉi tiu posedaĵo ne efikas sur unuopaj vicoj de flekseblaj eroj.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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