¿Qué es Flexbox en CSS??

Al diseñar un sitio web receptivo, desea que sus elementos alteren su comportamiento, como ancho, altura, resolución, orientación, etc. de acuerdo con el tipo de dispositivo que usa el sitio web. Esta publicación analiza cómo puede hacer que sus elementos respondan usando el diseño de FlexBox. Los sujetos en discusión son los siguientes.

1. Que es flexbox
2. Fondo
3. Componentes flexbox
4. Eje flexible
5. Propiedades Flexbox

Que es flexbox

CSS Flexbox es un modelo de diseño que permite una disposición eficiente y dinámica de elementos. Este diseño es unidimensional y permite la colocación de elementos dentro de un contenedor con espacio igualmente distribuido.

Este diseño hace que los elementos respondan, lo que significa que los elementos cambian su comportamiento de acuerdo con el tipo de dispositivo que los muestra. Hace que los elementos sean flexibles y les proporcione una posición adecuada y simetría.

Flexbox se introdujo en CSS versión 3 para organizar elementos en un contenedor de manera más eficiente y dinámica. Antes de Flexbox, inicialmente había cuatro métodos de diseño que hemos enumerado a continuación.

1. Bloquear
   Con el fin de crear secciones en una página web, se utiliza el diseño del bloque.
2. En línea
   Es un método de diseño que se utiliza para el texto.
3. Mesa
   Esto se usa para una tabla con datos bidimensionales.
4. Posición
   Esto se usa para una posición definida de un elemento.

Ahora discutiremos varios componentes de un FlexBox.

Componentes flexbox

Un Flexbox consta de dos componentes que hemos explicado a continuación.

1. contenedor flexible
   Este componente de una caja flexible define las propiedades del elemento ancestro al establecer su pantalla en flexión o en línea-flexión.
2. ítems flexibles
   Describe las propiedades de los elementos sucesores, además, puede haber numerosos elementos presentes dentro de un contenedor flexible.

Aquí hay una representación visual de una caja flexible.

Eje flexible

Al tratar con el diseño de FlexBox, hay dos ejes que deben atender. Estos ejes se han enumerado a continuación.

1. Eje principal
2. Eje cruzado

Ambos ejes se explican en detalle a continuación.

Eje principal

El eje principal (de izquierda a derecha) está establecido por el dirección flexible propiedad. Este eje puede representar cuatro valores que son; fila, reverso de fila, columna y columna-reverse.

En el caso de los dos primeros valores que son fila, y reverso, El Flexbox exhibe una dirección en línea, lo que significa que el contenedor flexible y los elementos se alinearán horizontalmente. Mientras que para el columna, y reverso de columna Valores La dirección del FlexBox estará en bloque, o en palabras más simples, el contenedor y los elementos se organizarán verticalmente.

Eje cruzado

La dirección de este eje es perpendicular al eje principal. Si la dirección del eje principal se ajusta a fila o reverso Luego, el eje cruzado se moverá a lo largo de las columnas hacia abajo, mientras que, en el caso de la columna, y la columna revertirá el eje se moverá a lo largo de las filas.

Ambos ejes tienen un comienzo, un punto de finalización y una cierta longitud entre estos puntos.

Propiedades Flexbox

Las propiedades de un FlexBox se han proporcionado a continuación.

1. mostrar
Muestra un elemento como una caja flexible.

2. dirección flexible
Esta propiedad define la dirección de los elementos en un contenedor flexible.

3. Justify-Content
Si los elementos en una caja flexible no consumen el espacio horizontal por completo, entonces esta propiedad los alinea a través del eje principal.

4. ítems alineados
Si los elementos en una caja flexible no consumen el espacio vertical por completo, esta propiedad los alinea a través del eje cruzado.

5. holgazán
Si no hay mucho espacio en una sola línea flexible, esta propiedad decide si envolver elementos o no.

6. alineado
Altera el comportamiento de la propiedad Flex-Wrap y es bastante similar a la propiedad Align-items con la única diferencia es que alinea las líneas flexibles en lugar de los elementos flexibles.

7. flujo flexible
Una propiedad en taquigrafía para la dirección flexible y la envoltura flexible.

8. orden
Define el orden de un elemento flexible en relación con otros elementos presentes en una caja flexible.

9. alinearse
Esta propiedad anula la propiedad Align-Items y se utiliza en elementos flexibles.

10. doblar
Establece la longitud de los elementos flexibles en relación con otros elementos presentes en un FlexBox.

Veamos un ejemplo.

Ejemplo
A continuación le hemos mostrado un ejemplo de cómo crear un FlexBox.

Html

Artículo
Artículo
Artículo<
Artículo

Aquí hemos creado un contenedor Div que tiene clase "Flexbox" de clase y anidando cuatro contenedores Div más dentro de él.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;

En primer lugar, estamos asignando al contenedor DIV principal una pantalla flexible para que sea una caja flexible, y luego le estamos dando un color de fondo.

CSS

.Flexbox div
Color de fondo: LightGrey;
margen: 15px;
relleno: 20px;
tamaño de fuente: 35px;

Por último, estamos diseñando los elementos flexibles presentes en FlexBox utilizando varias propiedades CSS.

Producción

Se generó un Flexbox con éxito.

Conclusión

Un Flexbox es un modelo de diseño que organiza elementos de manera eficiente y dinámica al tiempo que les da espacios distribuidos iguales dentro de un contenedor. Este diseño hace que los elementos respondan, lo que significa que los elementos cambian su comportamiento de acuerdo con el tipo de dispositivo que los muestra. Consiste en un contenedor flexible y elementos que se consideran sus componentes. Además, tiene ejes principales y cruzados y exhibe múltiples propiedades. Este artículo cubre todos los detalles necesarios sobre una caja flexible junto con un ejemplo adecuado.