Flex

Habilitar comportamientos flex

Aplica utilidades display para crear un contenedor flexbox y transformar los elementos secundarios directos en elementos flex. Los contenedores y elementos flex se pueden modificar aún más con propiedades flex adicionales.

<div class="d-flex p-2">¡Soy un contenedor flexbox!</div>

<div class="d-inline-flex p-2">¡Soy un contenedor flexbox en línea!</div>

También existen variantes responsivas para .d-flex y .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 (Direction)

Establece la dirección de los elementos flex en un contenedor flex con utilidades de dirección. En la mayoría de los casos, puedes omitir la clase horizontal aquí, ya que el valor predeterminado del navegador es row. Sin embargo, puedes encontrarte con situaciones en las que necesites establecer explícitamente este valor (como diseños responsivos).

Usa .flex-row para establecer una dirección horizontal (la predeterminada del navegador), o .flex-row-reverse para comenzar la dirección horizontal desde el lado opuesto.

<div class="d-flex flex-row mb-3">
  <div class="p-2">Elemento flex 1</div>
  <div class="p-2">Elemento flex 2</div>
  <div class="p-2">Elemento flex 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Elemento flex 1</div>
  <div class="p-2">Elemento flex 2</div>
  <div class="p-2">Elemento flex 3</div>
</div>

Usa .flex-column para establecer una dirección vertical, o .flex-column-reverse para comenzar la dirección vertical desde el lado opuesto.

<div class="d-flex flex-column mb-3">
  <div class="p-2">Elemento flex 1</div>
  <div class="p-2">Elemento flex 2</div>
  <div class="p-2">Elemento flex 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Elemento flex 1</div>
  <div class="p-2">Elemento flex 2</div>
  <div class="p-2">Elemento flex 3</div>
</div>

También existen variantes responsivas 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

Justificar contenido (Justify content)

Usa las utilidades justify-content en contenedores flexbox para cambiar la alineación de los elementos flex en el eje principal (el eje x para comenzar, el eje y si flex-direction: column). Elige entre start (predeterminado del navegador), end, center, between, around o evenly.

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

También existen variantes responsivas 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

Alinear elementos (Align items)

Usa las utilidades align-items en contenedores flexbox para cambiar la alineación de los elementos flex en el eje cruzado (el eje y para comenzar, el eje x si flex-direction: column). Elige entre start, end, center, baseline o stretch (predeterminado del navegador).

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

Alinear a uno mismo (Align self)

Usa las utilidades align-self en elementos flexbox para cambiar individualmente su alineación en el eje cruzado (el eje y para comenzar, el eje x si flex-direction: column). Elige entre las mismas opciones que align-items: start, end, center, baseline o stretch (predeterminado del navegador).

<div class="align-self-start">Elemento flex alineado</div>
<div class="align-self-end">Elemento flex alineado</div>
<div class="align-self-center">Elemento flex alineado</div>
<div class="align-self-baseline">Elemento flex alineado</div>
<div class="align-self-stretch">Elemento flex alineado</div>

También existen variantes responsivas 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

Rellenar (Fill)

Usa la clase .flex-fill en una serie de elementos hermanos para forzarlos a tener anchos iguales a su contenido (o anchos iguales si su contenido no supera sus border-boxes) mientras ocupan todo el espacio horizontal disponible.

<div class="d-flex">
  <div class="p-2 flex-fill">Elemento flex con mucho contenido</div>
  <div class="p-2 flex-fill">Elemento flex</div>
  <div class="p-2 flex-fill">Elemento flex</div>
</div>

También existen variantes responsivas para flex-fill.

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

Crecer y encoger (Grow and shrink)

Usa las utilidades .flex-grow-* para alternar la capacidad de un elemento flex de crecer para llenar el espacio disponible. En el siguiente ejemplo, el elemento .flex-grow-1 utiliza todo el espacio disponible que puede, al tiempo que permite a los dos elementos flex restantes su espacio necesario.

<div class="d-flex">
  <div class="p-2 flex-grow-1">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Tercer elemento flex</div>
</div>

Usa las utilidades .flex-shrink-* para alternar la capacidad de un elemento flex de encogerse si es necesario. En el siguiente ejemplo, el segundo elemento flex con .flex-shrink-1 se ve obligado a ajustar su contenido a una nueva línea, "encogiéndose" para permitir más espacio para el elemento flex anterior con .w-100.

<div class="d-flex">
  <div class="p-2 w-100">Elemento flex</div>
  <div class="p-2 flex-shrink-1">Elemento flex</div>
</div>

También existen variantes responsivas para flex-grow y 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

Márgenes automáticos (Auto margins)

Flexbox puede hacer cosas fantásticas cuando mezclas alineaciones flex con márgenes automáticos. A continuación se muestran tres ejemplos de control de elementos flex a través de márgenes automáticos: predeterminado (sin margen automático), empujando dos elementos a la derecha (.me-auto) y empujando dos elementos a la izquierda (.ms-auto).

<div class="d-flex mb-3">
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
  <div class="ms-auto p-2">Elemento flex</div>
</div>

Con align-items

Mueve verticalmente un elemento flex a la parte superior o inferior de un contenedor combinando align-items, flex-direction: column y margin-top: auto o margin-bottom: auto.

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Elemento flex</div>
  <div class="p-2">Elemento flex</div>
  <div class="mt-auto p-2">Elemento flex</div>
</div>

Ajuste de línea (Wrap)

Cambia cómo se ajustan los elementos flex en un contenedor flex. Elige entre ningún ajuste en absoluto (el predeterminado del navegador) con .flex-nowrap, ajuste con .flex-wrap o ajuste inverso con .flex-wrap-reverse.

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

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

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

También existen variantes responsivas 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

Orden (Order)

Cambia el orden visual de elementos flex específicos con un puñado de utilidades order. Solo proporcionamos opciones para hacer que un elemento sea el primero o el último, así como un reinicio para usar el orden DOM. Como order toma cualquier valor entero de 0 a 5, agrega CSS personalizado para cualquier valor adicional necesario.

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">Primer elemento flex</div>
  <div class="order-2 p-2">Segundo elemento flex</div>
  <div class="order-1 p-2">Tercer elemento flex</div>
</div>

También existen variantes responsivas 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

Además, también existen clases responsivas .order-first y .order-last que cambian el order de un elemento aplicando order: -1 y order: 6, respectivamente.

• .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 contenido (Align content)

Usa las utilidades align-content en contenedores flexbox para alinear elementos flex juntos en el eje cruzado. Elige entre start (predeterminado del navegador), end, center, between, around o stretch. Para demostrar estas utilidades, hemos forzado flex-wrap: wrap y aumentado la cantidad de elementos flex.

¡Atención! Esta propiedad no tiene efecto en filas individuales de elementos flex.

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

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

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

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

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

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

También existen variantes responsivas 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

Objeto multimedia (Media object)

¿Buscas replicar el componente de objeto multimedia (media object) de Bootstrap 4? Recrealo en poco tiempo con unas pocas utilidades flex que permiten aún más flexibilidad y personalización que antes.

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    Este es un contenido de un componente multimedia. Puedes reemplazar esto con cualquier contenido y ajustarlo según sea necesario.
  </div>
</div>

Y supongamos que deseas centrar verticalmente el contenido junto a la imagen:

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    Este es un contenido de un componente multimedia. Puedes reemplazar esto con cualquier contenido y ajustarlo según sea necesario.
  </div>
</div>

CSS

API de utilidades de Sass

Las utilidades de Flexbox se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la 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,
  ),
),