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.
<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-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.
<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.
<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.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.
<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).
<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).
<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.
<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.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.
<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.
<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.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).
<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="me-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="ms-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: autoaŭ 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-wrapaŭ 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.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.
<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-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.
<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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.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.
<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:
<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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),