Cómo usar Flex para alinear elementos HTML

Las propiedades flexibles en CSS le permiten alinear elementos de manera más flexible y receptiva. Esto lo hace útil cuando desea que sus elementos HTML respondan mejor dentro del navegador web.

Este artículo explicará cómo puede usar ciertas propiedades flexibles. Esto incluye las propiedades Flex-Direction, Justify-Content, align-self, align-items, align-content y gap.

Cómo configurar la visualización flexible de CSS

Una estructura de ejemplo que puede usar para explorar los fundamentos de flexbox es un conjunto de divs secundarios debajo de un div principal único. En el siguiente código, hay un div principal "principal". Los tres divs secundarios representan elementos que puede alinear mediante propiedades flexibles.

Para que funcione cualquier estilo flexible, deberá agregar el pantalla: flexionar propiedad al contenedor flexible principal.

.padre {
 pantalla: flexible;
}

Sin flex, los divs secundarios se muestran uno tras otro en una formación de columna a lo largo de la página.

Para ver un ejemplo de esta configuración, vea y ejecute el código en este Fragmento de CodePen.

Cómo controlar la dirección del diseño

Él dirección de flexión La propiedad determina la dirección de fila o columna de los elementos secundarios.

Las opciones para la propiedad de dirección flexible incluyen:

dirección de flexión: fila | columna | fila-reversa | columna inversa

Deberá agregar un contenedor principal que rodee los elementos que desea alinear.

HTML:

CSS:

.red { color de fondo: rojo; }
.orange { color de fondo: naranja; }
.amarillo { color de fondo: amarillo; }
.verde { color de fondo: verde;}
.blue { color de fondo: azul; }
.púrpura { color de fondo: púrpura; }
.div padre {
 ancho: 40px;
 altura: 40px;
}

Aplique la propiedad de dirección flexible al contenedor flexible principal. Esto alineará los elementos div secundarios.

.padre {
 ancho: 300px;
 pantalla: flexible; 
 dirección de flexión: fila;
}

Muchas propiedades de flexión se refieren al concepto de eje principal y eje transversal. Cuando la dirección de flexión es hilera, el eje principal representa la dirección horizontal y el eje transversal representa la vertical. Un valor de columna cambia estos ejes.

Vea el código para la propiedad de dirección flexible en este Fragmento de CodePen para ver algunos ejemplos.

Cómo alinear elementos a lo largo del eje transversal

Él alinear elementos La propiedad controla la alineación de los elementos a lo largo del eje transversal. Para la dirección flexible predeterminada, fila, elementos de alineación controla la alineación vertical de los elementos.

Las opciones para la propiedad align-items incluyen:

alinear elementos: inicio flexible | extremo flexible | alinear-elementos | estirar

Agregue la propiedad align-items al contenedor principal para alinear sus elementos secundarios.

.padre {
 pantalla: flexible; 
 alinear elementos: inicio flexible;
}

Además, puede optar por alinear los elementos utilizando una línea de base. De forma predeterminada, la opción de línea de base alinea todos los elementos en función de la base de los elementos.

También puede elegir desde dónde comienza la línea de base, como la parte superior (primera línea de base) o la parte inferior (última línea de base).

alinear elementos: línea de base | primera línea de base | última línea de base;

Para alinear elementos: línea base para trabajar, asegúrese de que cada elemento tenga una altura o ancho diferente (según el eje que esté utilizando).

​​​

Vea el código de la propiedad align-items en este Fragmento de CodePen para ver algunos ejemplos.

Cómo anular la alineación en elementos individuales

Puedes usar el alinearse propiedad para anular cualquier estilo de elementos de alineación del contenedor principal. Esto significa que puede establecer una alineación flexible separada en un elemento individual.

Las opciones para la propiedad align-self incluyen:

alinearse: auto | arranque flexible | extremo flexible | centro | línea de base | estirar

Digamos, por ejemplo, que el contenedor principal tiene un estilo de dirección flexible establecido en "fila".

.padre {
 pantalla: flexible; 
 dirección de flexión: fila;
}

Puede aplicar la propiedad align-self en el elemento individual. El elemento individual utilizará el estilo de la propiedad align-self y centrará el elemento en el contenedor principal.

Vea el código de la propiedad align-self en este Fragmento de CodePen para ver algunos ejemplos.

Cómo distribuir líneas a través del eje transversal

Él alinear-contenido La propiedad alinea a los niños a lo largo del eje vertical. También puede determinar el espacio entre elementos que están en varias líneas.

Las opciones para la propiedad align-content incluyen:

alinear-contenido: inicio flexible | extremo flexible | centro | estirar | espacio-entre | espacio alrededor

Agregue la propiedad align-content al contenedor flexible principal. La propiedad align-content solo funcionará si se establece la propiedad flex-wrap. Agregue flex-wrap: ajuste al contenedor principal y reduzca el ancho del div principal para forzar los elementos en más de una línea.

.padre {
 envoltura flexible: envoltura;
 pantalla: flexible;
 alinear-contenido: inicio flexible;
 ancho: 180px;
}

Vea el código para la propiedad de alineación de contenido en este Fragmento de CodePen para ver algunos ejemplos.

Cómo alinear elementos en el eje principal

Él justificar-contenido La propiedad agrega alineación a la derecha, a la izquierda o al centro de los elementos secundarios. También distribuye los elementos agregando espacios entre ellos al justificar el contenido.

Las opciones para la propiedad de justificar el contenido incluyen:

justificar-contenido: inicio flexible | extremo flexible | centro | espacio-entre | espacio alrededor | uniformemente en el espacio

Envuelva los elementos que desea alinear debajo de un contenedor flexible principal.

HTML:

CSS:

.red { color de fondo: rojo; }
.green { color de fondo: verde claro; }
.blue { color de fondo: azul; }

Agregue la propiedad de contenido justificado al contenedor flexible principal.

.padre {
 ancho: 300px;
 pantalla: flexible; 
 justificar-contenido: inicio flexible;
}

La propiedad de justificar el contenido también admite valores enumerados en la especificación de alineación de cuadro CSS. Esto incluye valores como "inicio", "fin", "izquierda" y "derecha". Algunos navegadores no los admiten.

La propiedad de justificar el contenido también tiene una palabra clave "segura" que puede usar. Esto asegura que los elementos intenten permanecer dentro del rango del contenedor principal.

También se utiliza para evitar la pérdida de datos, en caso de que centre una palabra larga. El uso de la palabra clave segura evita que un div más corto corte la primera y la última letra.

.padre {
 pantalla: flexible; 
 justificar contenido: centro seguro;
}

La palabra clave segura también está limitada a ciertos navegadores. Puedes comprobar la compatibilidad en Puedo usar.

Vea el código para la propiedad de justificar contenido en este Fragmento de CodePen para ver algunos ejemplos.

Cómo agregar espacios entre elementos

Él brecha La propiedad le permite agregar una cantidad de espacio entre los elementos. es uno de los Funciones CSS más nuevas que pueden ayudarlo a crear un diseño receptivo.

Aplique la propiedad gap al contenedor flexible principal.

.padre {
 pantalla: flexible;
 espacio: 70px;
}

Si agrega un espacio que obliga a que la longitud de los elementos supere el ancho del principal, los elementos se reducirán para intentar encajar dentro de la fila.

.padre { 
 ancho: 300px;
 espacio: 120px;
}

Si usa flex-wrap: wrap para empujar los elementos a una nueva línea, la cantidad de espacio también se aplicará al espacio entre las filas.

.padre { 
 ancho: 300px;
 envoltura flexible: envoltura;
 espacio: 120px;
}

Además, también puede configurar el espacio entre filas y espacio entre columnas propiedades. Nuevamente, deberá aplicarlos al contenedor flexible principal.

La propiedad de espacio entre filas determina el espacio entre cada fila. La propiedad column-gap determina el espacio entre cada columna.

.padre { 
 espacio entre filas: 120 px; 
}
.padre { 
 espacio entre columnas: 120 px; 
}

Vea el código de la propiedad gap en este Fragmento de CodePen para ver algunos ejemplos.

Uso de más propiedades flexibles en su sitio web

Con suerte, ahora está familiarizado con las diversas propiedades flexibles que puede usar para alinear elementos en su página web. Esto incluye cómo puede usar las propiedades de dirección flexible, justificar contenido, alinearse a sí mismo, alinear elementos, alinear contenido y espacio.

Flexbox es una poderosa técnica de diseño, pero es solo una pequeña parte de CSS. También puede obtener información sobre nuevas propiedades de CSS, técnicas de codificación limpias y herramientas utilizadas para la optimización de CSS.

11 herramientas útiles para verificar, limpiar y optimizar archivos CSS

Leer siguiente

Sobre el Autor