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.
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
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
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, to 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>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-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
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
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
Salelá .flex-fillkelasi likoló na molɔngɔ́ ya biloko ya bandeko mpo na kotinda yango na makasi na bonene oyo ekokani ntango ozali kozwa esika nyonso ya horizontal oyo ezali. Mingimingi ezali na ntina mpo na kotambola na bonene ekokani, to oyo ebongi.
<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>Ba variations ya réponse ezali pe pona flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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 kolɛmbisa na etindami na .flex-shrink-1makasi mpo na kozinga biloko oyo ezali na kati na molɔngɔ ya sika, “kokita” mpo na kopesa esika mingi mpo na eloko ya kolɛmba oyo eleki 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
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 ( .mr-auto), mpe kotindika biloko mibale na lobɔkɔ ya mwasi ( .ml-auto).
Malheureusement, IE10 na IE11 ezo soutenir malamu te ba marges auto na ba éléments flex oyo parent na yango eza na valeur non par défaut justify-content. Tala eyano oyo ya StackOverflow mpo na koyeba makambo mosusu.
<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>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>Bobongola ndenge oyo biloko ya flex ezingaka na kati ya eloko oyo batyaka na flex. Pona kati na enveloppement ata moke te (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
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 (ndakisa, 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-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
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