Ir ao contido principal Ir á navegación de documentos
Check
in English

Dobrar

Xestiona rapidamente o deseño, o aliñamento e o tamaño das columnas da cuadrícula, a navegación, os compoñentes e moito máis cunha suite completa de utilidades flexibles de resposta. Para implementacións máis complexas, pode ser necesario CSS personalizado.

Activar comportamentos flexibles

Aplica displayutilidades para crear un contenedor flexbox e transforma os elementos fillos directos en elementos flexibles. Os contedores e elementos flexibles pódense modificar aínda máis con propiedades flexibles adicionais.

Son un contenedor flexbox!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Son un contenedor flexbox en liña!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Tamén existen variacións de resposta para .d-flexe .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ón

Establece a dirección dos elementos flexibles nun recipiente flexible con utilidades de dirección. Na maioría dos casos pode omitir aquí a clase horizontal xa que o navegador predeterminado é row. Non obstante, é posible que atopes situacións nas que precisas establecer este valor de forma explícita (como deseños sensibles).

Use .flex-rowpara establecer unha dirección horizontal (o navegador predeterminado) ou .flex-row-reversepara iniciar a dirección horizontal desde o lado oposto.

Elemento flexible 1
Elemento flexible 2
Elemento flexible 3
Elemento flexible 1
Elemento flexible 2
Elemento 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>

Use .flex-columnpara establecer unha dirección vertical ou .flex-column-reversepara comezar a dirección vertical dende o lado oposto.

Elemento flexible 1
Elemento flexible 2
Elemento flexible 3
Elemento flexible 1
Elemento flexible 2
Elemento 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>

Tamén existen variacións de resposta para 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

Xustificar o contido

Use justify-contentutilidades nos contedores flexbox para cambiar a aliñación dos elementos flexibles no eixe principal (o eixe x para comezar, o eixe y se flex-direction: column). Escolla entre start(predeterminado do navegador), end, center, between, aroundou evenly.

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

Tamén existen variacións de resposta para 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

Aliñar os elementos

Use align-itemsutilidades nos contedores de flexbox para cambiar a aliñación dos elementos flexibles no eixe transversal (o eixe Y para comezar, o eixo X se flex-direction: column). Escolla entre start, end, center, baselineou stretch(predeterminado do navegador).

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

Tamén existen variacións de resposta para 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

Aliñar a si mesmo

Use align-selfutilidades en elementos de flexbox para cambiar individualmente a súa aliñación no eixe transversal (o eixe Y para comezar, eixe X se flex-direction: column). Escolla entre as mesmas opcións que align-items: start, end, center, baselineou stretch(predeterminado do navegador).

Elemento flexible
Elemento flexible aliñado
Elemento flexible
Elemento flexible
Elemento flexible aliñado
Elemento flexible
Elemento flexible
Elemento flexible aliñado
Elemento flexible
Elemento flexible
Elemento flexible aliñado
Elemento flexible
Elemento flexible
Elemento flexible aliñado
Elemento 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>

Tamén existen variacións de resposta para 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

Enche

Use a .flex-fillclase nunha serie de elementos irmáns para forzalos a anchos iguais ao seu contido (ou anchos iguais se o seu contido non supera as súas caixas de bordo) mentres ocupa todo o espazo horizontal dispoñible.

Elemento flexible con moito contido
Elemento flexible
Elemento 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>

Tamén existen variacións de resposta para flex-fill.

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

Crecer e encoller

Use .flex-grow-*utilidades para cambiar a capacidade dun elemento flexible para crecer para cubrir o espazo dispoñible. No seguinte exemplo, os .flex-grow-1elementos usan todo o espazo dispoñible que poden, mentres permiten aos dous elementos flexibles restantes o espazo necesario.

Elemento flexible
Elemento flexible
Terceiro elemento 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>

Use .flex-shrink-*utilidades para cambiar a capacidade de redución dun elemento flexible se é necesario. No seguinte exemplo, o segundo elemento flexible con .flex-shrink-1está obrigado a envolver o seu contido nunha nova liña, "encollendo" para permitir máis espazo para o elemento flexible anterior con .w-100.

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

Tamén existen variacións de resposta para flex-growe 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

Marxes automáticas

Flexbox pode facer cousas moi incribles cando mesturas aliñacións flexibles con marxes automáticas. A continuación móstranse tres exemplos de control de elementos flexibles mediante marxes automáticas: predeterminado (sen marxe automática), empurrando dous elementos á dereita ( .me-auto) e empurrando dous elementos á esquerda ( .ms-auto).

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

Con elementos de aliñamento

Move verticalmente un elemento flexible á parte superior ou inferior dun recipiente mesturando align-items, flex-direction: columne margin-top: autoou margin-bottom: auto.

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

Envolver

Cambia como se envolven os elementos flexibles nun contedor flexible. Escolla entre non envolver (o predeterminado do navegador) con .flex-nowrap, envolver con .flex-wrapou envolver con .flex-wrap-reverse.

Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex flex-nowrap">
  ...
</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex flex-wrap">
  ...
</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Tamén existen variacións de resposta para 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

Orde

Cambia a orde visual de elementos flexibles específicos cun puñado de orderutilidades. Só ofrecemos opcións para facer un artigo primeiro ou último, así como un restablecemento para usar a orde DOM. Como ordertoma calquera valor enteiro de 0 a 5, engade CSS personalizado para os valores adicionais necesarios.

Primeiro elemento flexible
Segundo elemento flexible
Terceiro elemento 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>

Tamén existen variacións de resposta para 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

Ademais, tamén hai clases responsive .order-firste que cambian o elemento dun elemento aplicando e , respectivamente..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

Aliñar o contido

Use align-contentutilidades nos contedores flexbox para aliñar os elementos flexibles no eixe transversal. Escolla entre start(predeterminado do navegador), end, center, between, aroundou stretch. Para demostrar estas utilidades, aplicamos flex-wrap: wrape aumentamos o número de elementos flexibles.

Aviso! Esta propiedade non ten efecto en filas únicas de elementos flexibles.

Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex align-content-end flex-wrap">...</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex align-content-center flex-wrap">...</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex align-content-between flex-wrap">...</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex align-content-around flex-wrap">...</div>
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
Elemento flexible
<div class="d-flex align-content-stretch flex-wrap">...</div>

Tamén existen variacións de resposta para 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

Obxecto multimedia

Buscando replicar o compoñente do obxecto multimedia de Bootstrap 4? Recréao en pouco tempo con algunhas utilidades flexibles que permiten aínda máis flexibilidade e personalización que antes.

Placeholder Image
Este é algúns contidos dun compoñente multimedia. Podes substituír isto por calquera contido e axustalo segundo sexa necesario.
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>

E diga que quere centrar verticalmente o contido xunto á imaxe:

Placeholder Image
Este é algúns contidos dun compoñente multimedia. Podes substituír isto por calquera contido e axustalo segundo sexa necesario.
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

API de utilidades

As utilidades de Flexbox decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

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