Diseño Flex de Bootstrap5 (flexible)

Bootstrap5 controla el diseño de la página mediante clases flex.

Caja flexible (flexbox)

La mayor diferencia entre Bootstrap 3 y Bootstrap 4/5 es que Bootstrap 4/5 utiliza cajas flexibles para el diseño, en lugar de usar flotadores.

La caja flexible es un nuevo modo de diseño en CSS3, más adecuado para el diseño responsivo. Si aún no conoces flex, puedes leer nuestroCSS3 Caja flexible (Flex Box)tutorial

Nota: IE9 y versiones anteriores no admiten cajas flexibles, por lo tanto, si necesitas compatibilidad con IE8-9, usaBootstrap 3。

El siguiente ejemplo usa la clase d-flex para crear un contenedor de caja flexible y establece tres elementos hijos flexibles:

Ejemplo

<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>

Pruébalo »

Para crear un contenedor de caja flexible que se muestre en la misma línea, puedes usar la clase d-inline-flex:

Ejemplo

<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>

Pruébalo »

Dirección horizontal

.flex-rowPuedes configurar los elementos hijos flexibles para que se muestren horizontalmente. Este es el comportamiento predeterminado.

Usa.flex-row-reverseLa clase se usa para configurar la visualización alineada a la derecha, es decir, en la.flex-rowdirección opuesta.

Ejemplo

<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>

Pruébalo »

Dirección vertical

.flex-columnLa clase se usa para configurar la visualización vertical de los elementos hijos flexibles,.flex-column-reversese usa para invertir los elementos hijos:

Ejemplo

<div class="d-flex flex-column"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>

Pruébalo »

Alineación del contenido

.justify-content-*La clase se usa para modificar la disposición de los elementos hijos flexibles,*Valores permitidos para *:start (predeterminado), end, center, between o around:

Ejemplo

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

Pruébalo »

Ancho igual

La clase .flex-fill obliga a que todos los elementos hijos flexibles tengan el mismo ancho:

Ejemplo

<div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1</div> <div class="p-2 bg-warning flex-fill">Flex item 2</div> <div class="p-2 bg-primary flex-fill">Flex item 3</div> </div>

Pruébalo »

Crecimiento

.flex-grow-1 se utiliza para hacer que los elementos hijos usen el espacio restante. En el siguiente ejemplo, los dos primeros elementos hijos solo ocupan el espacio que necesitan, y el último obtiene el espacio restante:

Ejemplo

<div class="d-flex"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary flex-grow-1">Flex item 3</div> </div>

Pruébalo »

Sugerencia:Usa.flex-shrink-1para configurar la regla de contracción de los elementos hijos.

Ordenación

.orderLa clase puede configurar el orden de los elementos hijos flexibles, desde.order-1llegar.order-12, cuanto menor es el número, mayor es la prioridad (.order-1se coloca.order-2antes) :

Ejemplo

<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1</div> <div class="p-2 bg-warning order-2">Flex item 2</div> <div class="p-2 bg-primary order-1">Flex item 3</div> </div>

Pruébalo »

Margen exterior

.ms-autoLa clase puede establecer el margen exterior derecho del elemento hijo comoauto, es decir,margin-right: auto!important;，.me-autola clase puede configurar el margen izquierdo del elemento hijo comoauto, es decir,margin-left: auto!important;:

Ejemplo

<div class="d-flex mb-3 bg-secondary"> <div class="p-2 ms-auto bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex mb-3 bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 me-auto bg-primary">Flex item 3</div> </div>

Pruébalo »

Envoltura

Para envolver los elementos hijos en un contenedor flexible se pueden usar las siguientes tres clases: .flex-nowrap (predeterminado), .flex-wrap o .flex-wrap-reverse. Configuran el contenedor flex como de una sola línea o de varias líneas.

Ejemplo

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

Pruébalo »

Alineación del contenido

Podemos usar .align-content-* para controlar cómo apilar los elementos hijos en la dirección vertical. Los valores incluidos son: .align-content-start (predeterminado), .align-content-end, .align-content-center, .align-content-between, .align-content-around y .align-content-stretch.

Estas clases no tienen efecto cuando solo hay una línea de elementos hijos flexibles.

Ejemplo

<div class="d-flex flex-wrap align-content-start">..</div> <div class="d-flex flex-wrap align-content-end">..</div> <div class="d-flex flex-wrap align-content-center">..</div> <div class="d-flex flex-wrap align-content-around">..</div> <div class="d-flex flex-wrap align-content-stretch">..</div>

Pruébalo »

Alineación de los elementos hijos

Si se desea configurar la alineación de los elementos hijos en una sola línea, se puede usar.align-items-*la clase para controlarla, los valores incluidos son:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, y .align-items-stretch (predeterminado)。

Ejemplo

<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-around">..</div> <div class="d-flex align-items-stretch">..</div>

Pruébalo »

Alineación de elementos hijos específicos

Si se desea configurar la alineación de un elemento hijo específico, se puede usar la clase .align-self-* para controlarla. Los valores incluidos son: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, y .align-self-stretch (predeterminado).

Ejemplo

<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-start">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div>

Pruébalo »

Clases flex responsivas

Podemos configurar clases flex según el dispositivo para lograr un diseño de página responsivo. Los valores posibles para * en la siguiente tabla son: sm, md, lg o xl, que corresponden a dispositivos pequeños, medianos, grandes y extra grandes.
Clase Ejemplo Implementación
Contenedor flexible
.d-*-flex Crear contenedores de caja flexible según el dispositivo de pantalla Pruébalo
.d-*-inline-flex Crear contenedores de caja flexible en línea según el dispositivo de pantalla Pruébalo
Dirección
.flex-*-row Mostrar elementos hijos flexibles en dirección horizontal según el dispositivo de pantalla Pruébalo
.flex-*-row-reverse Mostrar elementos hijos flexibles en dirección horizontal y alineados a la derecha según el dispositivo de pantalla Pruébalo
.flex-*-column Mostrar elementos hijos flexibles en dirección vertical según el dispositivo de pantalla Pruébalo
.flex-*-column-reverse Mostrar elementos hijos flexibles en dirección vertical y en orden inverso según el dispositivo de pantalla Pruébalo
Alineación del contenido
.justify-content-*-start Mostrar elementos hijos flexibles en la posición inicial (alineados a la izquierda) según el dispositivo de pantalla Pruébalo
.justify-content-*-end Mostrar elementos hijos flexibles al final (alineados a la derecha) según el dispositivo de pantalla Pruébalo
.justify-content-*-center Centrar los elementos hijos en el contenedor flex según el dispositivo de pantalla Pruébalo
.justify-content-*-between Usar 'between' para mostrar elementos hijos flexibles según el dispositivo de pantalla Pruébalo
.justify-content-*-around Usar 'around' para mostrar elementos hijos flexibles según el dispositivo de pantalla Pruébalo
Ancho igual
.flex-*-fill Forzar el mismo ancho según el dispositivo de pantalla Pruébalo
Crecimiento
.flex-*-grow-0 No aplicar crecimiento en diferentes dispositivos de pantalla  
.flex-*-grow-1 Aplicar crecimiento en diferentes dispositivos de pantalla  
Contracción
.flex-*-shrink-0 No aplicar contracción en diferentes dispositivos de pantalla  
.flex-*-shrink-1 Aplicar contracción en diferentes dispositivos de pantalla  
Envoltura
.flex-*-nowrap No envolver los elementos en diferentes dispositivos de pantalla Pruébalo
.flex-*-wrap Envolver los elementos en diferentes dispositivos de pantalla Pruébalo
.flex-*-wrap-reverse Invertir la envoltura de los elementos en diferentes dispositivos de pantalla Pruébalo
Alineación del contenido
.align-content-*-start Apilar elementos en la posición inicial según el dispositivo de pantalla Pruébalo
.align-content-*-end Apilar elementos en la posición final según el dispositivo de pantalla Pruébalo
.align-content-*-center Apilar elementos en la posición central según el dispositivo de pantalla Pruébalo
.align-content-*-around Apilar elementos usando 'around' según el dispositivo de pantalla Pruébalo
.align-content-*-stretch Apilar elementos estirándolos según el dispositivo de pantalla Pruébalo
Ordenación
.order-*-0-12 Modificar el orden en tamaños de pantalla pequeños Pruébalo
Alineación de elementos
.align-items-*-start Según el dispositivo de pantalla, haz que los elementos se muestren en la misma fila al principio. Pruébalo
.align-items-*-end Según el dispositivo de pantalla, haz que los elementos se muestren en la misma fila al final. Pruébalo
.align-items-*-center Según el dispositivo de pantalla, haz que los elementos se muestren en la misma fila en el centro. Pruébalo
.align-items-*-baseline Según el dispositivo de pantalla, haz que los elementos se muestren en la misma fila alineados a la línea base. Pruébalo
.align-items-*-stretch Según el dispositivo de pantalla, haz que los elementos se estiren en altura y se muestren en la misma fila. Pruébalo
Alineación de un solo elemento hijo
.align-self-*-start Según el dispositivo de pantalla, haz que un solo elemento hijo se muestre al principio. Pruébalo
.align-self-*-end Según el dispositivo de pantalla, haz que un solo elemento hijo se muestre al final. Pruébalo
.align-self-*-center Según el dispositivo de pantalla, haz que un solo elemento hijo se muestre centrado. Pruébalo
.align-self-*-baseline Según el dispositivo de pantalla, haz que un solo elemento hijo se muestre alineado a la línea base. Pruébalo
.align-self-*-stretch Según el dispositivo de pantalla, estira un solo elemento hijo. Pruébalo
Otras extensiones