Propiedades CSS FlexBox | Explicado

Un sitio web receptivo requiere que haga que los elementos alteren su comportamiento, como ancho, altura, resolución, orientación, etc. de acuerdo con el tipo de dispositivo que usa el sitio web. CSS proporciona ciertas entidades que pueden ayudarlo a construir un sitio web receptivo como consultas de medios, red, flexbox, etc. Aquí en este artículo, nuestro enfoque estará en Flexbox y las propiedades asociadas con él. Los sujetos destacados en esta publicación son los siguientes.

1. Que es flexbox
2. ¿Qué es un contenedor flexible?
3. ¿Qué es un elemento flexible?
4. Propiedades Flexbox

Que es flexbox

El modelo de diseño FlexBox proporciona una disposición eficiente y dinámica de elementos colocándolos 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.

Un Flexbox básicamente hace que los elementos sean flexibles y les proporcione una posición adecuada y simetría.
Consiste en dos de los dos componentes que son contenedores flexibles y elementos flexibles. Ambos componentes se explican a continuación.

¿Qué es un contenedor flexible?

Este es un componente de una caja flexible que define las propiedades del elemento ancestro al establecer su pantalla en flexión o flexión en línea.

¿Qué es un elemento flexible?

Un elemento flexible describe las propiedades de los elementos sucesores, además, puede haber numerosos elementos flexibles presentes dentro de un contenedor flexible.

Ahora que tenemos una buena comprensión de un Flexbox y sus componentes, exploraremos varias propiedades asociadas con FlexBox.

Propiedades Flexbox

A continuación hemos explicado en gran profundidad las diversas propiedades vinculadas con un FlexBox.

Propiedad de visualización

Con el fin de indicar cómo se mostrará un elemento, se utiliza la propiedad de visualización.

Sintaxis

Pantalla: Flex;

Parámetros explicados

Flex: este valor muestra un elemento como contenedor flexible.

Ejemplo

Supongamos que desea que se muestre un contenedor Div como un FlexBox. Así es como se hace.

Html

Con el fin de indicar cómo se mostrará un elemento, se utiliza la propiedad de visualización.

Aquí, hemos generado un contenedor Div y un párrafo ha sido anidado dentro de él.

CSS

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

Usando la clase asignada al elemento DIV, estamos configurando su pantalla en Flex y le brinda un cierto color de fondo.

Producción

El div se mostró con éxito como una caja flexible.

El resto de las propiedades relacionadas con Flexbox se dividen en dos categorías, que son propiedades de contenedores flexibles y propiedades de elementos flexibles. Discutiremos ambas clases por separado.

Propiedades de contenedor flexible

Las propiedades que caen en esta categoría son las siguientes.

propiedad de dirección flexible

Esta propiedad se utiliza para describir la dirección de los elementos presentes en un FlexBox.

Sintaxis

Dirección flexible: fila | ROW-Reverse | columna | columna -reverse | inicial | heredar;

Parámetros explicados

fila: Este valor predeterminado organiza los elementos horizontalmente.
reverso de fila: Este valor coloca elementos en una fila pero con dirección inversa.
columna: Organiza los elementos verticalmente.
columna-reverse: Organiza los elementos en una columna pero de manera inversa.

Ejemplo

Colocemos ciertos elementos en una caja flexible que tiene dirección "fila".

Html

Artículo 1
Artículo 2
Artículo 3
Artículo 4

En el código anterior, estamos creando un recipiente Div más grande y anidamos cuatro recipientes Div más dentro de él.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Dirección flexible: fila;

Aquí estamos mostrando el div más grande como un contenedor flexible y dándole algo de color, y finalmente su dirección está configurada para remar.

CSS

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

Ahora estamos diseñando nuestros elementos dentro del contenedor utilizando propiedades básicas de CSS.

Producción

Los elementos han sido organizados en una fila.

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

Sintaxis

Justify-Content: Flex-Start | Flex-End | centro | Espacio entre | Espacio | Space -venly | inicial | heredar;

Parámetros explicados

Asegente flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.
Flex-End: Esto coloca los elementos al final del contenedor.
centro: Esto posiciona los elementos en el centro del contenedor.
espacio entre: Agrega espacio entre elementos.
Espacio: Agrega espacios antes, entre y después de cada elemento.
espacio-incluso: Esto le da a cada elemento espacios iguales.

Ejemplo

Supongamos que desea justificar su contenido al centro del contenedor flexible.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Justify-Content: Center;

El valor central colocará todos los elementos flexibles en el centro del contenedor.

CSS

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

Usando CSS básicos estamos diseñando los elementos.

Producción

Los artículos se colocaron en el centro con éxito.

Alineación de propiedades de ítems

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

Sintaxis

_Stretch _ Center _ Flex-start _ Flex-End _ Baseline _ Inicial _ Hered

Parámetros explicados

estirar: Es un valor predeterminado que estira los elementos para que se ajusten en el contenedor.
centro: Esto posiciona los elementos en el centro del contenedor.
Asegente flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.
Flex-End: Esto coloca los elementos al final del contenedor.
base: Esto posiciona los elementos en la línea de base del contenedor.

Ejemplo

Aquí hemos demostrado cómo funciona el valor de referencia de la propiedad alineada-items.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Altura: 200px;
Alineación de ítems: línea de base;

Para demostrar esta propiedad correctamente, proporcionamos cierta altura al contenedor flexible y establecemos la propiedad Aline-Items a la línea de base.

Producción

La propiedad funciona correctamente.

propiedad Flex-Wrap

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

Sintaxis

Flex-Wrap: Nowrap | envoltura | Wrap-Reverse | inicial | heredar;

Parámetros explicados

Nowrap: Este valor predeterminado no envuelve elementos.
envoltura: Envuelve los elementos si es necesario.
Wrap-Reverse: Envuelve los elementos si es necesario pero de manera inversa.

Ejemplo

Para comprender esta propiedad, consulte el siguiente ejemplo.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Flex-Wrap: Wrap-Reverse;

En el código anterior, hemos establecido la propiedad Flex-Wrap en Wrap-Reverse, lo que significa que si se requieren elementos en el contenedor estarán envueltos pero de manera inversa.

Producción

Los elementos fueron envueltos de manera inversa.

propiedad de alineación de contenido

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.

Sintaxis

Alineado-Contente: Flex-Start | Flex-End | centro | Espacio entre | Espacio | Space -venly | inicial | heredar;

Parámetros explicados

Asegente flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.
Flex-End: Esto coloca los elementos al final del contenedor.
centro: Esto posiciona los elementos en el centro del contenedor.
espacio entre: Agrega espacio entre elementos.
Espacio: Agrega espacios antes, entre y después de cada elemento.
espacio-incluso: Esto le da a cada elemento espacios iguales.

Ejemplo

Aquí hay un ejemplo de la propiedad en discusión.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Altura: 300px;
Flex-Wrap: envoltura;
alineado contenido: espacio entre;

Aquí hemos aumentado aún más la altura del contenedor para que pueda comprender esta propiedad de una mejor manera. Además, hemos asignado la propiedad alineada y contenida el valor entre el espacio que agregará espacio entre elementos.

Producción

El espacio entre los elementos se agregó con éxito.

propiedad de flujo flexible

Describe la dirección de los elementos mientras especifica si envolver elementos o no, además, es una propiedad en taquigrafía para el seguimiento.

1. dirección del flujo
2. envasado

Sintaxis

FLEX-FLOW: flujo de flujo de flujo-envoltura | inicial | heredar;

Parámetros explicados

dirección del flujo: Define la dirección de los elementos.
Flow-Wrap: Establece si los elementos deben estar envueltos o no.

Ejemplo

Considere el siguiente ejemplo para comprender el funcionamiento de esta propiedad.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Flex-Flow: envoltura de columna-reverse;

Usando la propiedad abreviada, hemos establecido la dirección de los elementos flexibles como reverso de columna mientras los envolvemos usando el valor de envoltura.

Producción

Los elementos fueron envueltos en una columna pero en orden inverso.

Ahora discutiremos nuestra próxima categoría.

Propiedades de elemento flexible

Las propiedades asociadas con el elemento flexible son las siguientes.

orden de orden

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

Sintaxis

Orden: Num | inicial | heredar;

Parámetros explicados

NUM: Este valor define el orden de un elemento flexible. Por defecto, el valor es 0.

Ejemplo

Así es como establece el orden de los elementos en FlexBox.

Html

Artículo 1
Artículo 2
Artículo 3
Artículo 4

Para comprender esta propiedad correctamente, estamos asignando cada DIV anidada alguna identificación.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Altura: 250px;

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

Aquí estamos mostrando primero el contenedor DIV como una caja flexible y proporcionándole cierta altura para demostrar el funcionamiento de esto correctamente, y por último estamos diseñando nuestros elementos flexibles.

CSS

#Artículo 1
Orden: 4;

#item2
Orden: 1;

#item3
Orden: 2;

#item4
Orden: 3;

Usando esas ID, estamos asignando algún pedido a cada artículo.

Producción

Los elementos se colocaron en el orden asignado.

propiedad alineada

Esta propiedad se utiliza para definir el posicionamiento de los elementos dentro de un contenedor flexible. Esta propiedad anula la propiedad Align-Items y se utiliza en elementos flexibles.

Sintaxis

Alinine-Self: Auto | estiramiento | centro | flujo flexible | Flex-End | línea de base | inicial | heredar;

Parámetros explicados

auto: Este es un valor predeterminado que hereda las características del contenedor de antepasados ​​o si no hay un contenedor de antepasados, entonces estira el elemento.
estirar: Estira los elementos para que encajen en el contenedor.
centro: Esto posiciona los elementos en el centro del contenedor.
Asegente flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.
Flex-End: Esto coloca los elementos al final del contenedor.
base: Esto posiciona los elementos en la línea de base del contenedor.

Ejemplo

Considere el ejemplo a continuación.

CSS

#item2
Alineado: Centro;

#item3
Alineado-Self: Flex-Start;

Usando los ID asignados, el elemento 2 se ha colocado en el centro del contenedor, sin embargo, el elemento 3 se ha colocado al comienzo del contenedor.

Producción

Ambos elementos se alinearon con éxito.

propiedad de cultivo flexible

Esta propiedad describe la medida en que un elemento crecerá en relación con los otros elementos presentes dentro del contenedor.

Sintaxis

Flex-Crow: Número | inicial | heredar;

Parámetros explicados

número: Este valor establece el alcance del crecimiento de un elemento. Por defecto, el valor es 0.

Ejemplo

Supongamos que solo queremos hacer crecer un elemento con respecto a otros. Así es como lo haces.

CSS

#item2
Flex-Crow: 10;

Establecemos el valor de la propiedad Flex-Grow en 10, lo que significa que el elemento 2 será 10 veces mayor en comparación con otros elementos.

Producción

La propiedad funciona correctamente.

propiedad Flex-Shrink

Esta propiedad define la medida en que un elemento se reducirá en relación con los otros elementos presentes dentro del contenedor.

Sintaxis

Flex-Shrink: número | inicial | heredar;

Parámetros explicados

número: Establece en qué medida se encoge un elemento. Por defecto, el valor es 0.

Ejemplo

Aquí hay un ejemplo de esta propiedad.

Html

1
2
3
4
5

Para comprender el funcionamiento de esta propiedad, hemos creado un contenedor div más grande y anidados cinco contenedores Div más dentro del más grande. Además, a cada DIV se le ha asignado un color de fondo diferente para que el concepto de esta propiedad se pueda demostrar correctamente.

CSS

.envase
Pantalla: Flex;
Ancho: 400px;
Altura: 200px;

.contenedor div
Flex-Básis: 100px;

Aquí estamos mostrando el div más grande como una caja flexible, además, también le estamos dando algo de ancho y altura. Por último, estamos configurando su base flex en 100px que define la longitud inicial de un elemento flexible.

CSS

.artículo
Flex-Shrink: 4;

Usando la clase asignada a los dos últimos contenedores DIV, establecemos su Flex-Shrink en 4, lo que significa que estos elementos serán 4 veces más pequeños que otros elementos en la cuadrícula.

Producción

Los elementos 4 y 5 son más pequeños que el resto de los artículos.

Propiedad Flex-Basis

Con el fin de establecer la longitud inicial de un elemento flexible, se utiliza esta propiedad.

Sintaxis

Flex-Basis: Auto | Num | inicial | heredar;

Parámetros explicados

auto: Es un valor predeterminado que proporciona un elemento con la longitud igual a la del elemento flexible.
NUM: Establece la longitud original de un artículo.

Ejemplo

Supongamos que desea darle a un elemento flexible algo de longitud inicial. Hemos demostrado cómo se hace.

CSS

#item4
Flex-Básis: 300px;

Establecemos la base flexible del elemento 4 a 300px, lo que significa que la longitud original del cuarto elemento será de 300px.

Producción

La longitud inicial del tercer elemento se estableció con éxito.

propiedad flexible

Esta propiedad establece el crecimiento, la contracción y la longitud de un elemento de una vez, además, es una propiedad abreviada para

1. flujo flexible
2. Flex-shrink
3. basis flexible

Sintaxis

Flex-Property: Flex-Grow Flex-Shrink Flex-Basis | inicial | heredar;

Parámetros explicados

Flex-Crow: Especifica el crecimiento del elemento flexible con respecto a otros elementos en el contenedor.
Flex-Shrink: Establece la contracción de un artículo en relación con otros artículos
Flex-Básis: Proporciona la longitud inicial de un artículo.

Ejemplo

Consulte el siguiente ejemplo para comprender la propiedad Flex.

CSS

#item2
flexión: 0 0 250px;

El artículo 2 no crecerá ni encogerá, sin embargo, tendrá una longitud de 250px.

Producción

La propiedad funciona correctamente.

Conclusión

Las propiedades asociadas con Flexbox se clasifican en dos categorías que son propiedades de contenedores Flex y propiedades de caja flexible. Las propiedades relacionadas con el contenedor flexible son; FLEX-FLOW, Dirección FLEX, alineado, contenido, contenido de justificación, etc. Mientras tanto, las propiedades vinculadas al elemento flexible son; Orden, Flex-Crow, Flex-Básis, Aline-Self, etc. Todas estas propiedades se discuten en este tutorial junto con ejemplos relevantes.