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.
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">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">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
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">
<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-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">
<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
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
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
Uzu align-self
ilojn 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).
<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
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">
<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>
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" 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>
Ŝ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
Ŝ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ŭ rekomencon por uzi la DOM-ordonon. Kiel order
prenas ajnan entjeran valoron (ekz, 5
), aldonu kutiman CSS por iuj aldonaj valoroj bezonataj.
<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-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
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-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