Source

Flexionar

Administre rápidamente el diseño, la alineación y el tamaño de las columnas de la cuadrícula, la navegación, los componentes y más con un conjunto completo de utilidades flexibles de respuesta. Para implementaciones más complejas, puede ser necesario un CSS personalizado.

Habilitar comportamientos flexibles

Aplique displayutilidades para crear un contenedor de caja flexible y transforme elementos secundarios directos en elementos flexibles. Los contenedores y elementos flexibles se pueden modificar aún más con propiedades flexibles adicionales.

¡Soy un contenedor flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
¡Soy un contenedor flexbox en línea!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

También existen variaciones de respuesta para .d-flexy .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

Establezca la dirección de los elementos flexibles en un contenedor flexible con utilidades de dirección. En la mayoría de los casos, puede omitir la clase horizontal aquí, ya que el valor predeterminado del navegador es row. Sin embargo, puede encontrar situaciones en las que necesite establecer explícitamente este valor (como diseños receptivos).

Úselo .flex-rowpara establecer una dirección horizontal (el valor predeterminado del navegador) o .flex-row-reversepara iniciar la dirección horizontal desde el lado opuesto.

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>

Utilícelo .flex-columnpara establecer una dirección vertical o .flex-column-reversepara iniciar la dirección vertical desde el lado opuesto.

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>

También existen variaciones de respuesta 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

Justificar el contenido

Use justify-contentlas utilidades en los contenedores de flexbox para cambiar la alineación de los elementos flexibles en el eje principal (el eje x para comenzar, el eje y si flex-direction: column). Elija entre start(navegador predeterminado), end, center, betweeno around.

Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo 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>

También existen variaciones de respuesta 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

Alinear elementos

Use align-itemslas utilidades en los contenedores de flexbox para cambiar la alineación de los elementos flexibles en el eje transversal (el eje y para comenzar, el eje x si flex-direction: column). Elija entre start, end, center, baselineo stretch(predeterminado del navegador).

Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo 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>

También existen variaciones de respuesta 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

Alinearse a sí mismo

Use align-selfutilidades en los elementos de Flexbox para cambiar individualmente su alineación en el eje transversal (el eje y para comenzar, el eje x si flex-direction: column). Elija entre las mismas opciones que align-items: start, end, center, baselineo stretch(predeterminado del navegador).

Artículo flexible
Elemento flexible alineado
Artículo flexible
Artículo flexible
Elemento flexible alineado
Artículo flexible
Artículo flexible
Elemento flexible alineado
Artículo flexible
Artículo flexible
Elemento flexible alineado
Artículo flexible
Artículo flexible
Elemento flexible alineado
Artículo 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>

También existen variaciones de respuesta 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

Llenar

Use la .flex-fillclase en una serie de elementos hermanos para obligarlos a tener anchos iguales mientras ocupa todo el espacio horizontal disponible. Especialmente útil para navegación de ancho igual o justificada.

Artículo flexible
Artículo flexible
Artículo flexible
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

También existen variaciones de respuesta para flex-fill.

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

Crecer y encogerse

Utilice .flex-grow-*las utilidades para alternar la capacidad de crecimiento de un elemento flexible para llenar el espacio disponible. En el siguiente ejemplo, los .flex-grow-1elementos usan todo el espacio disponible que pueden, mientras permiten que los dos elementos flexibles restantes tengan su espacio necesario.

Artículo flexible
Artículo flexible
Tercer 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 alternar la capacidad de encoger un elemento flexible si es necesario. En el ejemplo a continuación, el segundo elemento flexible con .flex-shrink-1se ve obligado a envolver su contenido en una nueva línea, "reduciéndose" para permitir más espacio para el elemento flexible anterior con .w-100.

Artículo flexible
Artículo 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>

También existen variaciones de respuesta para flex-growy 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

Márgenes automáticos

Flexbox puede hacer cosas asombrosas cuando combina alineaciones flexibles con márgenes automáticos. A continuación se muestran tres ejemplos de control de elementos flexibles a través de márgenes automáticos: predeterminado (sin margen automático), empujar dos elementos a la derecha ( .mr-auto) y empujar dos elementos a la izquierda ( .ml-auto).

Desafortunadamente, IE10 e IE11 no admiten correctamente los márgenes automáticos en elementos flexibles cuyo padre no tiene un justify-contentvalor predeterminado. Consulte esta respuesta de StackOverflow para obtener más detalles.

Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo 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 alineación

Mueva verticalmente un elemento flexible a la parte superior o inferior de un contenedor mezclando align-items, flex-direction: columny margin-top: autoo margin-bottom: auto.

Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo 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

Cambie la forma en que los elementos flexibles se envuelven en un contenedor flexible. Elija entre no envolver en absoluto (el valor predeterminado del navegador) con .flex-nowrap, envolver con .flex-wrapo invertir el envoltorio con .flex-wrap-reverse.

Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
<div class="d-flex flex-nowrap">
  ...
</div>
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
<div class="d-flex flex-wrap">
  ...
</div>
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
Artículo flexible
<div class="d-flex flex-wrap-reverse">
  ...
</div>

También existen variaciones de respuesta 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

Ordenar

Cambie el orden visual de elementos flexibles específicos con un puñado de orderutilidades. Solo proporcionamos opciones para hacer que un artículo sea el primero o el último, así como un reinicio para usar el orden DOM. Como ordertoma cualquier valor entero (p. ej. 5), agregue CSS personalizado para cualquier valor adicional necesario.

Primer elemento flexible
Segundo elemento flexible
Tercer 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>

También existen variaciones de respuesta 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

Alinear contenido

Use align-contentutilidades en contenedores flexbox para alinear elementos flexibles en el eje transversal. Elija entre start(navegador predeterminado), end, center, between, aroundo stretch. Para demostrar estas utilidades, aplicamos flex-wrap: wrapy aumentamos la cantidad de elementos flexibles.

¡Aviso! Esta propiedad no tiene efecto en filas individuales de elementos flexibles.

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

También existen variaciones de respuesta para 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