Clases FlexBox en Bootstrap 5 | Explicado
Este artículo trata sobre clases flexibles en Bootstrap 5 y los siguientes puntos se discuten en detallado
- Contenedores de FlexBox
- Instrucciones de FlexBox
- Justificar contenido
- Alinear artículos
- Clases de envoltura
- Alinearse
Bootstrap 5 clases flexibles
D-FLEX
En Bootstrap 5, los contenedores flexibles se crean utilizando el .D-FLEX clase. D-FLEX El contenedor de clase se expande al ancho completo, lo que significa que se expande al ancho de la pantalla, pero el elemento en él se expande de acuerdo con su contenido.
Código
Caja
Caja
Caja
Caja
.D-*-Flex también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
D-en línea
En Bootstrap 5, los contenedores flexibles se crean utilizando el .D-en línea clase. D-en línea El contenedor de clase se expande de acuerdo con la cantidad de elementos y los elementos del área de contenido cubierto en él.
Código
Caja
Caja
Caja
Caja
.D-*-Flex en línea también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Instrucciones flexibles
Reverso de hilera flexible
.reverso de hilera flexible La clase se usa para cambiar la dirección de los elementos en reversa. Esta clase FlexBox solo se usa con el .fila clase. Esta clase también se usará con diferentes puntos de interrupción
Código
Caja
Caja
Caja
Caja
.Flex-*-Row-Reverse también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Columna flexible
.columna flexible La clase se usa para convertir filas en columnas. Esta clase también se usa con el .fila clase.
Código
Caja
Caja
Caja
Caja
.Flex-*-columna también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Flex-Column-Reverse
.Flex-Column-Reverse clase, convierta las filas en columnas y también cambie la dirección de los elementos flexibles en reversa. Esta clase también se usa con .fila clase.
Código
Caja
Caja
Caja
Caja
.Flex-*-Columna-Reverse también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Holgazán
.holgazán La clase se usa para envolver los elementos dentro del contenedor y con esta clase se administra el desbordamiento de los elementos flexibles. Por defecto, los elementos están envueltos, pero aún puede usar esta clase para envolver los elementos que
desborda el contenedor flexible.
Código
Caja
Caja
Caja
Caja
.Flex-*-envoltura también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Holgazanería
.holgazanería La clase se usa donde no desea que se envuelvan sus elementos flexibles porque, por defecto, los elementos flexibles se envuelven dentro del contenedor flexible debido a su comportamiento de respuesta para que pueda usar la clase Flex-Nowrap para desenvolver sus elementos.
Código
Caja
Caja
Caja
Caja
.Flex-*-Nowrap también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Flex-Wrap-Reverse
.Flex-Wrap-Reverse La clase no solo se usa para envolver elementos flexibles dentro de un contenedor, sino que también revertir su pedido.
Código
Caja
Caja
Caja
Caja
.Flex-*-Wrap-Reverse también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Llenado de flexión
.llenado de flexión La clase solo se usa con el .COL CLASS sin ningún punto de interrupción o ancho. La clase Flex-llena toma el 100% de ancho del contenedor y obliga a los otros elementos flexibles a dividir el espacio por igual. La clase de relleno flexible se puede aplicar en múltiples elementos flexibles y solo en los elementos flexibles.
Código
Caja
Caja
Caja
Caja
.Flex-*-Llenarse también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Justificar contenido
Las clases de Justify-Content se utilizan para justificar elementos Flex en una dirección de fila o en otras palabras a lo largo del eje principal.
Justify-Content-start
.Justify-Content-start clase, mueve los elementos flexibles al lado izquierdo del contenedor. Esta clase solo se usa con el .clase D-Flex.
Código
Caja
Caja
Caja
Caja
Caja
.Justify-Content-*-Comienza también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Justify-Content-End
.Justify-Content-End clase, mueve los elementos flexibles al lado derecho del contenedor. Esta clase solo se usa con el .D-FLEX clase.
Código
Caja
Caja
Caja
Caja
Caja
.Justify-Content-*-Fin también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Justificar el centro de contenido
.justificar el centro de contenido clase, recopile todos los elementos flexibles en el centro del contenedor. Esta clase solo se usa con el .D-FLEX clase.
Código
Caja
Caja
Caja
Caja
Caja
.Justify-Content-*-Centro también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Justify-contento entre
.Justify-contento entre La clase se usa para colocar espacios entre los elementos flexibles. Esta clase coloca el primer elemento flexible al comienzo del contenedor y el último elemento flexible al final del contenedor y divide todo el espacio por igual entre los elementos flexibles restantes .Esta clase solo se usa con el .D-FLEX clase.
Código
Caja
Caja
Caja
Caja
Caja
.justify-contento-*-entre también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Justificar-contenido
.justificar-contenido La clase se usa para dividir el espacio por igual entre todos los elementos flexibles. Esta clase solo se usa con el .D-FLEX clase.
Código
Caja
Caja
Caja
Caja
Caja
.justify-contento-*-alrededor también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Alinear contenido
Alinear las clases de contenido se utilizan para alinear el contenido en la dirección de la columna o en otras palabras solo a lo largo del eje cruzado. Para alinear los elementos flexibles, use el .clase D-Flex con el .holgazán clase.
Alinearse
.alinearse clase, alinee los elementos flexibles en la parte superior del contenedor.
Código
Caja
Caja
Caja
Caja
Caja
Caja6
Caja
Caja
Box9
Caja10
Caja
Box12
.alinearse-ítems-*-comenzar también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Alinearse
.alinearse clase, alinee los elementos flexibles en la parte inferior del contenedor.
Código
Caja
Caja
Caja
Caja
Caja
Caja6
Caja
Caja
Box9
Caja10
Caja
Box12
.Alineación de ítems-*-Fin también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Alinearse
.alinearse clase, centrada verticalmente los elementos flexibles en un contenedor.
Código
Caja
Caja
Caja
Caja
Caja
Caja6
Caja
Caja
Box9
Caja10
Caja
Box12
.Alineación de ítems-*-Centro también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Alinearse
.alinearse clase, alinee el contenido en los cuadros de acuerdo con el eje principal debido a qué elementos del contenedor se alinean automáticamente en la dirección vertical.
Código
Caja
Caja
Caja
Caja
Caja
Caja6
Caja
Caja
.Alineación-ítems-*-línea de base también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Alinearse
.alinearse clase, expandir los elementos flexibles verticalmente de acuerdo con la altura del contenedor.
Código
Caja
Caja
Caja
Caja
.alinearse-ítems-*-estirarse también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción también hace que esta clase responda para otras pantallas.
Alinearse
.alinearse La clase es como .ítems alineados clase pero la diferencia entre ambas clases es .Aline-Items se aplica en el contenedor flexible y trata todos los elementos flexibles con la misma clase que usa Flex Container en ese momento, pero el .alinearse La clase se aplica en un solo elemento flexible y trata un solo elemento flexible.
Los siguientes son el .alinearse las clases que se utilizan en elementos flexibles
- .alinearse
- .alineado
- .alinearse
- .alinearse
- .alinearse
.Alinine-Self-*-Inicio/End/Center/Baseline/STRING también se usa con puntos de interrupción, simplemente reemplace el (*) Símbolo con xxl, xl, lg, md o sm. El uso de puntos de interrupción hace que estas clases también respondan a otras pantallas.
Conclusión
Las clases de FlexBox se utilizan con la clase D-Flex en Bootstrap 5 para justificar, alinear y administrar el contenido en filas o en columnas. En las clases de contenedores flexibles de artículo anteriores, clases de instrucciones Flex, clases de envoltura, clases de justificación flexible para justificar los elementos en fila, las clases de alineación flexible para alinear el contenido en la columna y las clases para alinear los elementos en sí se discuten en detalle.