CSS una mejor manera de establecer la distancia entre los elementos de FlexBox

Hay dos métodos más utilizados para establecer la distancia entre los elementos FlexBox, I.mi., El uso de la propiedad CSS de Justify-Content con la propiedad espacial y con la propiedad espacial entre. Cuando el "Justify-Content"La propiedad CSS está establecida en"espacial", Agrega espacio alrededor de cada elemento FlexBox del elemento HTML. Sin embargo, cuando su valor se establece como "espacio entre", Agrega espacio entre los elementos del elemento HTML.

Este artículo demostrará el uso de los valores de "espacios espaciales" y "espaciales" para el "contenido justificar" con el fin de agregar espacios entre los elementos de FlexBox.

Cómo establecer la distancia entre los elementos de FlexBox?

La sintaxis para definir la "Justify-Content"Establecer espacio alrededor y entre los elementos de FlexBox es el siguiente:

Justify-Content: Space-Around; Justify-Content: Space-between;

Prerrequisito: Creación de elementos FlexBox

Para establecer la distancia entre los elementos FlexBox, primero se requiere para crear un FlexBox con los elementos FlexBox y luego aplicar las propiedades CSS en él.

Ejemplo

Agregamos un elemento de contenedor DIV para crear el DIV principal y luego algunos elementos DIV dentro de él para crear los elementos FlexBox:

A
B
C
D

En el fragmento de código agregado arriba:

• A "div"El elemento contenedor se ha agregado con la clase declarada como"doblar".
• Dentro de eso, se agregan cuatro elementos de contenedores div más con el nombre de la clase declarado como "artículo".
• Los elementos div tienen el texto "A","B","C" y "D"Escrito en ellos.

El elemento de estilo CSS contendrá algunas propiedades para hacer una mejor visualización de los elementos de FlexBox:

.doblar

Pantalla: Flex;
Altura: 50VH;
Alineación de ítems: Centro;

.artículo

Ancho: 40px;
Altura: 40px;
Color de fondo: PowderBlue;
Text-Align: Center;
relleno: 25px;

En el fragmento de código anterior, se han agregado las siguientes propiedades de CSS:

• El "mostrar"La propiedad se ha definido como"doblar"Para alinear correctamente el texto dentro del contenedor Div.
• El "altura"La propiedad se ha establecido en"50 VH"Para establecer la longitud vertical del elemento del contenedor Div.
• El "ítems alineados"La propiedad se define como centrada para alinear el elemento Div al centro.
• Después de la ".doblar"Selector de clases, el".artículoSe agrega el selector de clases que tiene las propiedades CSS para los elementos dentro del contenedor Div principal.
• El "ancho"La propiedad se define como"40px"Para establecer la longitud horizontal de cada uno de los elementos de FlexBox.
• El "altura"De los elementos de FlexBox está configurado en"40px".
• El "color de fondo"De los elementos de FlexBox se define como"azul pálido".
• El "texto alineado"El centro se ha definido como"centro"Para alinear los alfabetos escritos dentro de los elementos de FlexBox al centro.
• El "relleno"La propiedad se ha definido como"25px"Para definir la distancia entre el contenido y el borde.

El fragmento de código anterior generará la siguiente salida:

Ahora, se requiere establecer la distancia entre los elementos de FlexBox creados.

Método 1: Definir la propiedad "Justify-Content" como "espacial"

Uno de los métodos es agregar el "Justify-Property"Y definalo como"espacial"Para agregar los espacios o la distancia alrededor de cada elemento de FlexBox:

.doblar

Justify-Content: Space-Around;
…

.artículo

…

El ejemplo del código anterior indica que existe la adición del "Justify-Content"Propiedad que se ha definido como"espacial". Los puntos indican que todas las propiedades siguen siendo las mismas aquí que se agregan anteriormente en la sección de requisitos previos de esta publicación.

Como resultado, el espacio definido se agregará alrededor de los elementos FlexBox:

Método 2: Defina la propiedad "Justify-Content" como "espacio entre"

El otro método es agregar el "Justify-Property"Y definalo como"espacio entre"Para agregar los espacios o la distancia entre cada elemento de FlexBox:

.doblar

Justify-Content: Space-between;
…

.artículo

…

El ejemplo anterior indica que existe la adición del "Justify-Content: espacio entre"Y todas las propiedades de CSS siguen siendo las mismas aquí también.

El ejemplo anterior agregará distancia entre cada elemento de FlexBox. Sin embargo, no habrá distancia entre el elemento más a la izquierda y la derecha y el contenedor DIV porque solo agrega distancia entre los elementos FlexBox a diferencia del ""espacial":

Esto resume los dos métodos diferentes para establecer la distancia entre los elementos de FlexBox.

Conclusión

Para establecer la distancia entre los elementos de FlexBox, agregue la ID o el selector de clase en el elemento de estilo CSS que se refiere al elemento principal en el que se han creado todos los elementos FlexBox y luego defina el ""Justify-Content: espacio entre"Propiedad como" O "espacial" o "espacio entre". Esta guía de blog sobre los métodos para establecer la distancia entre los elementos de FlexBox.