Flex
Gestioneu ràpidament el disseny, l'alineació i la mida de les columnes de la quadrícula, la navegació, els components i molt més amb un conjunt complet d'utilitats flexbox sensibles. Per a implementacions més complexes, pot ser necessari CSS personalitzat.
Apliqueu displayutilitats per crear un contenidor flexbox i transformeu els elements secundaris directes en elements flexibles. Els contenidors i articles flexibles es poden modificar encara més amb propietats flexibles addicionals.
<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>També existeixen variacions de resposta per a .d-flexi .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
Establiu la direcció dels elements flexibles en un contenidor flexible amb utilitats de direcció. En la majoria dels casos, podeu ometre la classe horitzontal aquí, ja que el navegador predeterminat és row. Tanmateix, és possible que us trobeu amb situacions en què necessiteu establir explícitament aquest valor (com ara dissenys sensibles).
Utilitzeu .flex-row-lo per establir una direcció horitzontal (el navegador predeterminat) o .flex-row-reverseper iniciar la direcció horitzontal des del costat oposat.
<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>Utilitzeu -lo .flex-columnper establir una direcció vertical o .flex-column-reverseper iniciar la direcció vertical des del costat oposat.
<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>També existeixen variacions de resposta per a 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
Utilitzeu justify-contentles utilitats als contenidors flexbox per canviar l'alineació dels elements flexibles a l'eix principal (l'eix x per començar, l'eix y si flex-direction: column). Trieu entre start(per defecte del navegador), end, center, betweeno 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>També existeixen variacions de resposta per a 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
Utilitzeu align-itemsles utilitats als contenidors Flexbox per canviar l'alineació dels elements flexibles a l'eix transversal (l'eix Y per començar, l'eix X si flex-direction: column). Trieu entre start, end, center, baselineo stretch(predeterminat del navegador).
<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>També existeixen variacions de resposta per a 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
Utilitzeu align-selfutilitats als elements de flexbox per canviar-ne l'alineació individualment a l'eix transversal (l'eix Y per començar, l'eix X si flex-direction: column). Trieu entre les mateixes opcions que align-items: start, end, center, baselineo stretch(per defecte del navegador).
<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>També existeixen variacions de resposta per a 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 pot fer coses força increïbles quan barregeu alineacions flexibles amb marges automàtics. A continuació es mostren tres exemples de control d'elements flexibles mitjançant marges automàtics: predeterminat (sense marge automàtic), prem dos elements cap a la dreta ( .mr-auto) i dos elements cap a l'esquerra ( .ml-auto).
Malauradament, IE10 i IE11 no admeten correctament els marges automàtics dels elements flexibles el justify-contentvalor principal dels quals no és predeterminat. Consulteu aquesta resposta de StackOverflow per obtenir més detalls.
<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>Mou verticalment un element flexible a la part superior o inferior d'un recipient barrejant align-items, flex-direction: columni margin-top: autoo 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>Canvieu com s'emboliquen els elements flexibles en un contenidor flexible. Trieu entre cap embolcall (el navegador predeterminat) amb .flex-nowrap, embolcall amb .flex-wrap, o embolcall invers amb .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>També existeixen variacions de resposta per a 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
Canvieu l' ordre visual d'elements flexibles específics amb un grapat d' orderutilitats. Només oferim opcions per fer un article primer o darrer, així com un restabliment per utilitzar la comanda DOM. Com orderpren qualsevol valor enter (per exemple, 5), afegiu CSS personalitzat per als valors addicionals necessaris.
<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>També existeixen variacions de resposta per a 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
Utilitzeu align-contentutilitats als contenidors flexbox per alinear els elements flexibles a l'eix transversal. Trieu entre start(per defecte del navegador), end, center, between, aroundo stretch. Per demostrar aquestes utilitats, hem aplicat flex-wrap: wrapi augmentat el nombre d'elements flexibles.
Caps amunt! Aquesta propietat no té cap efecte en files individuals d'elements flexibles.
<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>També existeixen variacions de resposta per a 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