Flex
Administra 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 responsive. Para implementaciones más complejas, puede ser necesario un CSS personalizado.
Habilitar comportamientos flexibles
Aplica utilidades display para crear un contenedor flexbox y transformar elementos hijos directos en elementos flexibles. Los contenedores y elementos flexibles se pueden modificar aún más con propiedades flexibles adicionales.
<div class="d-flex p-2 bd-highlight">¡Soy un contenedor flexbox!</div><div class="d-inline-flex p-2 bd-highlight">¡Soy un contenedor flexbox en línea!</div>También existen variaciones responsive 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
Direcciones
Establece la dirección de los elementos flexibles en un contenedor flexible 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 encontrar situaciones en las que necesites establecer explícitamente este valor (como diseños responsive).
Usa .flex-row para establecer una dirección horizontal (el valor predeterminado del navegador), o .flex-row-reverse para comenzar la dirección horizontal desde el lado opuesto.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Elemento flex 1</div>
<div class="p-2 bd-highlight">Elemento flex 2</div>
<div class="p-2 bd-highlight">Elemento flex 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Elemento flex 1</div>
<div class="p-2 bd-highlight">Elemento flex 2</div>
<div class="p-2 bd-highlight">Elemento flex 3</div>
</div>Utiliza .flex-column para establecer una dirección vertical, o .flex-column-reverse para iniciar la dirección vertical desde el lado opuesto.
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Elemento flex 1</div>
<div class="p-2 bd-highlight">Elemento flex 2</div>
<div class="p-2 bd-highlight">Elemento flex 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Elemento flex 1</div>
<div class="p-2 bd-highlight">Elemento flex 2</div>
<div class="p-2 bd-highlight">Elemento flex 3</div>
</div>También existen variaciones responsive 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
Usa las utilidades justify-content en los contenedores de flexbox para cambiar la alineación de los elementos flexibles en el eje principal (el eje x para start, el eje y si es flex-direction: column). Elije 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 variaciones responsive 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
Tal vez te interese
Alinear elementos
Usa las utilidades align-items en los contenedores de flexbox para cambiar la alineación de los elementos flexibles en el eje transversal (el eje y para start, el eje x si es flex-direction: column). Elije entre start, end, center, baseline, or 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 variaciones responsive 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 uno mismo
Usa las utilidades align-self en elementos de flexbox para cambiar individualmente su alineación en el eje transversal (el eje y para start, el eje x si es flex-direction: column). Elije 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 variaciones responsive 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
Utiliza la clase .flex-fill en una serie de elementos hermanos para obligarlos a tener anchos iguales a su contenido (o anchos iguales si su contenido no supera sus border-boxes) mientras ocupa todo el espacio horizontal disponible.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Elemento flex con mucho contenido</div>
<div class="p-2 flex-fill bd-highlight">Elemento flex</div>
<div class="p-2 flex-fill bd-highlight">Elemento flex</div>
</div>También existen variaciones responsive para flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Crecer y encogerse
Usa las utilidades .flex-grow-* para alternar la capacidad de crecimiento de un elemento flexible para llenar el espacio disponible. En el ejemplo a continuación, los elementos .flex-grow-1 usan todo el espacio disponible que pueden, mientras permiten que los dos elementos flexibles restantes tengan el espacio necesario.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Tercer elemento flex</div>
</div>Usa las utilidades .flex-shrink-* para alternar la capacidad de encoger un elemento flexible si es necesario. En el siguiente ejemplo, el segundo elemento flexible con .flex-shrink-1 se 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.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Elemento flex</div>
<div class="p-2 flex-shrink-1 bd-highlight">Elemento flex</div>
</div>También existen variaciones responsive 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
Flexbox puede hacer cosas asombrosas cuando combinas 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), empujando dos elementos a la derecha (.me-auto) y empujando dos elementos a la izquierda (.ms-auto) .
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="ms-auto p-2 bd-highlight">Elemento flex</div>
</div>Con elementos alineados
Mueve verticalmente un elemento flexible a la parte superior o inferior de un contenedor mezclando align-items, flex-direction: column, y margin-top: auto o margin-bottom: auto.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="p-2 bd-highlight">Elemento flex</div>
<div class="mt-auto p-2 bd-highlight">Elemento flex</div>
</div>Tal vez te interese
Envoltura
Cambia la forma en que los elementos flexibles se envuelven en un contenedor flexible. Elije entre no envolver en absoluto (el valor predeterminado del navegador) con .flex-nowrap, envolver con .flex-wrap o envolver en reversa 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 variaciones responsive 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
Cambia el orden visual de elementos flexibles específicos con un puñado de utilidades de order. Solo proporcionamos opciones para hacer que un artículo sea el primero o el último, así como un reinicio para usar el orden del 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 bd-highlight">
<div class="order-3 p-2 bd-highlight">Primer elemento flex</div>
<div class="order-2 p-2 bd-highlight">Segundo elemento flex</div>
<div class="order-1 p-2 bd-highlight">Tercer elemento flex</div>
</div>También existen variaciones responsive 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 responsive .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
Usa las utilidades align-content en contenedores flexbox para alinear los elementos flexibles juntos en el eje transversal. Elija entre start (predeterminado del navegador), end, center, between, around o stretch. Para demostrar estas utilidades, aplicamos flex-wrap: wrap y aumentamos la cantidad de elementos flexibles.
¡Cuidado! Esta propiedad no tiene efecto en filas individuales de elementos flexibles.
<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 variaciones responsive 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
¿Buscas replicar el componente de objeto de medios de Bootstrap 4? Recréalo en poco tiempo con algunas utilidades flexibles 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 el contenido de un componente multimedia. Puedes reemplazar esto con cualquier contenido y ajustarlo según sea necesario.
</div>
</div>Y digamos que quieres centrar verticalmente el contenido al lado de 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 componente multimedia. Puedes reemplazar esto con cualquier contenido y ajustarlo según sea necesario.
</div>
</div>Tal vez te interese
Sass
API de utilidades
Las utilidades de Flexbox se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende 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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),