in English

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.

En aquesta pàgina

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!

html

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

Sóc un contenidor flexbox en línia!

html

<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
.d-xxl-flex
.d-xxl-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

html

<div class="d-flex flex-row mb-3">
  <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.

Element flexible 1

Element flexible 2

Element flexible 3

Element flexible 1

Element flexible 2

Element flexible 3

html

<div class="d-flex flex-column mb-3">
  <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
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-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, between, aroundo evenly.

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>
<div class="d-flex justify-content-evenly">...</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-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

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
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-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
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-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

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
.flex-xxl-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

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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-1es veu 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

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
.flex-xxl-{grow|shrink}-0
.flex-xxl-{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 ( .me-auto) i dos elements cap a l'esquerra ( .ms-auto).

Element flexible

html

<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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

html

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-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 orderque pren qualsevol valor enter de 0 a 5, afegiu CSS personalitzat per als valors addicionals necessaris.

Primer article flexible

Segon article flexible

Tercer element flexible

html

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

A més, també hi ha classes responsive .order-firsti que canvien el d'un element aplicant i , respectivament..order-lastorderorder: -1order: 6

.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

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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Objecte multimèdia

Voleu replicar el component d'objecte multimèdia de Bootstrap 4? Recreeu-lo en molt poc temps amb unes quantes utilitats flexibles que permeten encara més flexibilitat i personalització que abans.

Aquest és un contingut d'un component multimèdia. Podeu substituir-lo per qualsevol contingut i ajustar-lo segons sigui necessari.

html

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

I digues que vols centrar verticalment el contingut al costat de la imatge:

Aquest és un contingut d'un component multimèdia. Podeu substituir-lo per qualsevol contingut i ajustar-lo segons sigui necessari.

html

<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

Utilitats API

Les utilitats de Flexbox es declaren a la nostra API d'utilitats en scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

    "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
    ),
    "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,
      ),
    ),