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 na biloko ezali na makoki ya ko modifier lisusu na ba propriétés ya flex ya kobakisa.
<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>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">
<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>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">
<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>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
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">
<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>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" 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>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
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">
<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>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