Source

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.

Activar comportaments flexibles

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.

Sóc un contenidor flexbox!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

Sóc un contenidor flexbox en línia!

<div class="d-inline-flex p-2 bd-highlight">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

Direcció

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.

Element flexible 1

Element flexible 2

Element flexible 3

Element flexible 1

Element flexible 2

Element flexible 3

<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>

Utilitzeu -lo .flex-columnper establir una direcció vertical o .flex-column-reverseper iniciar la direcció vertical des del costat oposat.

Element flexible 1

Element flexible 2

Element flexible 3

Element flexible 1

Element flexible 2

Element flexible 3

<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>

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

Justificar el contingut

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.

Element flexible

<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

Alinear els elements

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).

Element flexible

<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

Alinear-se

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).

Element flexible

Element flexible alineat

Element flexible

Element flexible alineat

Element flexible

Element flexible alineat

Element flexible

Element flexible alineat

Element flexible

Element flexible alineat

Element flexible

<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

Omplir

Utilitzeu la .flex-fillclasse en una sèrie d'elements germans per forçar-los a amplades iguals al seu contingut (o amplades iguals si el seu contingut no supera els seus quadres de vora) mentre ocupa tot l'espai horitzontal disponible.

Element flexible amb molt contingut

Element flexible

<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>

També existeixen variacions de resposta per a flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

Créixer i reduir-se

Utilitzeu .flex-grow-*les utilitats per canviar la capacitat d'un element flexible de créixer per omplir l'espai disponible. A l'exemple següent, els .flex-grow-1elements utilitzen tot l'espai disponible que poden, alhora que permeten als dos elements flexibles restants el seu espai necessari.

Element flexible

Tercer element flexible

<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>

Utilitzeu .flex-shrink-*les utilitats per canviar la capacitat d'un element flexible de reduir-se si és necessari. A l'exemple següent, el segon element flexible amb .flex-shrink-1està obligat a embolicar el seu contingut en una línia nova, "reduint" per permetre més espai per a l'element flexible anterior amb .w-100.

Element flexible

<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>

També existeixen variacions de resposta per a flex-growi 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

Marges automàtics

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.

Element flexible

<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>

Amb elements d'alineació

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.

Element flexible

<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>

Embolicar

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.

Element flexible

<div class="d-flex flex-nowrap">
  ...
</div>

Element flexible

<div class="d-flex flex-wrap">
  ...
</div>

Element flexible

<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

Ordre

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.

Primer article flexible

Segon article flexible

Tercer element flexible

<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>

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

Alinear el contingut

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.

Element flexible

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Element flexible

<div class="d-flex align-content-end flex-wrap">...</div>

Element flexible

<div class="d-flex align-content-center flex-wrap">...</div>

Element flexible

<div class="d-flex align-content-between flex-wrap">...</div>

Element flexible

<div class="d-flex align-content-around flex-wrap">...</div>

Element flexible

<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