Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

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!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
¡Soy un contenedor flexbox en línea!
html
<div class="d-inline-flex p-2">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
  • .d-xxl-flex
  • .d-xxl-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
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>

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

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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, between, aroundo evenly.

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

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

Llenar

Use la .flex-fillclase en una serie de elementos hermanos para obligarlos a tener anchos iguales a su contenido (o anchos iguales si su contenido no supera sus cuadros de borde) mientras ocupa todo el espacio horizontal disponible.

Elemento flexible con mucho contenido
Artículo flexible
Artículo 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>

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

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-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
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 alternar la capacidad de encoger un elemento flexible si es necesario. En el siguiente ejemplo, el segundo elemento flexible con .flex-shrink-1se ve obligado a envolver su contenido en una nueva línea, "reduciéndose" para dejar más espacio para el elemento flexible anterior con .w-100.

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

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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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 ( .me-auto) y empujar dos elementos a la izquierda ( .ms-auto).

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

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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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 de 0 a 5, agregue CSS personalizado para cualquier valor adicional necesario.

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

También existen variaciones de respuesta 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 hay clases responsivas .order-firsty que cambian la de un elemento aplicando y , 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

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

¿ Busca replicar el componente de objeto multimedia de Bootstrap 4? Recréelo en poco tiempo con algunas utilidades flexibles que permiten aún más flexibilidad y personalización que antes.

Placeholder Image
Este es un contenido de un componente multimedia. Puede reemplazar esto con cualquier contenido y ajustarlo según sea 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>

Y digamos que quieres centrar verticalmente el contenido al lado de la imagen:

Placeholder Image
Este es un contenido de un componente multimedia. Puede reemplazar esto con cualquier contenido y ajustarlo según sea 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>

Hablar con descaro a

API de utilidades

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