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.
😎 Esta traducción es parte del proyecto esdocu.com.
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
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>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>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,
),
),
😎 Esta traducción es parte del proyecto esdocu.com.