Ya pete
Bokamba noki layout, alignment, mpe taille ya ba colonnes ya grille, navigation, ba composants, mpe mingi mosusu na suite mobimba ya ba utilitaires flexbox oyo ezo répondre. Mpo na bosaleli ya mindondo mingi, CSS ya momesano ekoki kozala na ntina.
Activer ba comportements ya flex
Salelá displayba utilitaires mpo na kosala conteneur ya flexbox mpe kobongola ba éléments ya bana direct na biloko ya flex. Ba récipients ya flex mpe biloko ezali na makoki ya ko modifier lisusu na ba propriétés ya flex ya kobakisa.
<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>Ba variations ya réponse ezali pe pona .d-flexpe .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
Ngambo
Botia direction ya biloko ya flex na récipient ya flex na ba utilitaires ya direction. Na makambo mingi okoki ko omiter classe horizontale awa lokola défaut ya navigateur ezali row. Kasi, okoki kokutana na makambo oyo osengelaki kotya polele motuya oyo (lokola ba layouts oyo ezoyanola).
Salelá .flex-rowmpo na kotya ngámbo oyo ezali na ngámbo ya nse (ya navigateur na ndenge ya liboso), to .flex-row-reversempo na kobanda ngámbo ya ngámbo mosusu.
<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>Salelá .flex-columnmpo na kotya ngámbo ya semba, to .flex-column-reversempo na kobanda ngámbo ya ngámbo mosusu.
<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>Ba variations ya réponse ezali pe pona 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
Kolongisa makambo oyo ezali na kati
Salelá justify-contentba utilitaires na ba récipients ya flexbox mpo na kobongola alignment ya biloko ya flex na axe principal (axe x mpo na kobanda, axe y soki flex-direction: column). Pona kati na start(navigateur ya liboso), end, center, between, around, to 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>
Ba variations ya réponse ezali pe pona 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
Bongisá biloko na molɔngɔ
Salelá align-itemsba utilitaires na ba récipients ya flexbox mpo na kobongola alignment ya biloko ya flex na axe croisé (axe y mpo na kobanda, axe x soki flex-direction: column). Pona kati na start, end, center, baseline, to stretch(navigateur ya liboso).
<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>
Ba variations ya réponse ezali pe pona 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
Align yo moko
Salelá align-selfba utilitaires na biloko ya flexbox mpo na kobongola mokomoko alignment na yango na axe croisé (axe y mpo na kobanda, axe x soki flex-direction: column). Pona kati na ba options ndenge moko na align-items: start, end, center, baseline, to stretch(navigateur par défaut).
<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>
Ba variations ya réponse ezali pe pona 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
Kotondisa
Salelá .flex-fillkelasi na molɔngɔ́ ya biloko ya bandeko mpo na kotinda bango na makasi na bonene oyo ekokani na makambo na bango (to bonene oyo ekokani soki makambo na bango eleki te bakɛsi-ba-border na bango) ntango ozali kozwa esika nyonso oyo ezali na nse ya mabele.
<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>Ba variations ya réponse ezali pe pona flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Kokola mpe kokita
Salelá .flex-grow-*ba utilitaires mpo na kobongola makoki ya eloko moko ya flex mpo na kokola mpo na kotondisa esika oyo ezali. Na ndakisa oyo ezali awa na nse, ba .flex-grow-1éléments esalela espace nionso oyo ekoki, tout en permettant ba éléments flex mibale oyo etikali espace na bango oyo esengeli.
<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>Salelá .flex-shrink-*ba utilitaires mpo na kobongola makoki ya eloko moko ya flex ya kokita soki esengeli. Na ndakisa oyo ezali awa na nse, eloko ya mibale ya kobalusa na etindami na .flex-shrink-1makasi mpo na kozinga biloko na yango na molɔngɔ ya sika, “kokita” mpo na kopesa esika mingi mpo na eloko oyo ebaluki liboso na .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>Ba variations ya réponse ezali pe pona flex-growpe 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
Ba marges ya automatique
Flexbox ekoki kosala mwa makambo kitoko ya kokamwa ntango ozali kosangisa ba alignments ya flex na ba marges ya auto. Emonisami awa na nse bandakisa misato ya kotambwisa biloko oyo ezali kolɛmba na nzela ya ba marges auto: par défaut (marge automatique ezali te), kotindika biloko mibale na lobɔkɔ ya mobali ( .me-auto), mpe kotindika biloko mibale na lobɔkɔ ya mwasi ( .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>Na align-biloko
Bokende na verticale eloko moko ya flex na likolo to na nse ya récipient na kosangisaka align-items, flex-direction: column, mpe margin-top: autoto 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>Kokanga
Bobongola ndenge biloko ya flex ezingaka na kati ya récipient ya flex. Pona kati na enveloppement te ata moke (ya navigateur par défaut) na .flex-nowrap, enveloppe na .flex-wrap, to enveloppe inverse na .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>
Ba variations ya réponse ezali pe pona 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
Etinda
Bobongola ordre visuel ya biloko ya flex spécifique na mwa ba orderutilitaires. Tozali kopesa kaka ba options ya kosala eloko moko liboso to ya suka, mpe lisusu réinitialisation mpo na kosalela commande ya DOM. Lokola orderezuaka motuya ya motango mobimba nyonso kobanda 0 kino 5, bakisa CSS ya momesano mpo na motuya nyonso ya kobakisa oyo esengeli.
<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>Ba variations ya réponse ezali pe pona 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
En plus ezali pe na responsive .order-firstna ba .order-lastclasses oyo e changer ya orderya élément moko en appliquant order: -1na order: 6, respectivement.
.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
Bobongisa makambo oyo ezali na kati
Salelá align-contentba utilitaires na ba récipients ya flexbox mpo na ko aligner biloko ya flex esika moko na axe croisé. Pona kati na start(navigateur ya liboso), end, center, between, around, to stretch. Mpo na kolakisa ba utilitaires oyo, tosili kosala makasi flex-wrap: wrapmpe tobakisaki motango ya biloko ya flex.
Mitó likoló! Propriété oyo ezali na effet moko te na ba lignes unique ya biloko ya flex.
<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>
Ba variations ya réponse ezali pe pona 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
Objet ya media
Ozali koluka kozongela composant ya objet ya media uta na Bootstrap 4? Bosala yango lisusu na ntango moke na mwa ba utilitaires flex oyo epesaka nzela na flexibilité mpe personnalisation mingi koleka liboso.
<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>Mpe loba olingi ko centrer verticalement contenus pembeni ya image:
<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 oyo azali
API ya ba utilitaires
Ba utilitaires ya Flexbox esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.
"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,
),
),