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!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Son un contenedor flexbox en liña!
<div class="d-inline-flex p-2 bd-highlight">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

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

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

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

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, betweenou around.

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>

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

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

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

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

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

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-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
<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>

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

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

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 ( .mr-auto) e empurrando dous elementos á esquerda ( .ml-auto).

Desafortunadamente, IE10 e IE11 non admiten correctamente as marxes automáticas nos elementos flexibles cuxos pais teñen un justify-contentvalor non predeterminado. Consulta esta resposta de StackOverflow para obter máis detalles.

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

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

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

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 (por exemplo, 5), engade CSS personalizado para calquera valor adicional necesario.

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

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

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