Conferencia 14: Flexbox: la forma moderna de alinear y distribuir el espacio

¡Hola! ¿Listo para sumergirte en una de las herramientas CSS más interesantes y poderosas? Hoy vamos a explorar Flexbox. Si alguna vez ha tenido problemas para alinear elementos o distribuir el espacio de una manera ordenada y receptiva, Flexbox es su nuevo mejor amigo.

1. ¿Qué es Flexbox?

Flexbox (Diseño de caja flexible) es un sistema de diseño unidimensional que le permite controlar la alineación, el espaciado y la distribución de elementos dentro de un contenedor, incluso cuando el tamaño de esos elementos es desconocido o dinámico.

Piense en Flexbox como una caja de herramientas para crear diseños que se pueden estirar, reducir o alinear según el espacio disponible.

2. La magia comienza con la pantalla: flex

Para comenzar a usar Flexbox, solo necesita configurar display: flex en un contenedor. Una vez que hagas eso, todos los hijos directos de ese contenedor se convertirán en elementos flexibles e inmediatamente comenzarán a comportarse de manera diferente.

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

Ahora, todos los elementos dentro de .flex-container son elementos flexibles y se pueden manipular fácilmente.

3. Dirección flexible: ¿hacia qué dirección debemos ir?

De forma predeterminada, Flexbox organiza los elementos en una fila (horizontalmente), pero ¿qué pasa si los quieres en una columna (verticalmente)? Flexbox te brinda control total con la propiedad flex-direction.

• fila: Alinea elementos en una fila horizontal (este es el valor predeterminado).
• columna: apila elementos en una columna vertical.
• row-reverse: Igual que la fila, pero el orden de los elementos se invierte.
• column-reverse: Igual que la columna, pero los elementos se apilan en orden inverso.

.flex-container {
    display: flex;
    flex-direction: column;
}

¡Ahora los elementos se apilarán verticalmente!

4. Justificar el contenido: difundir las cosas

Digamos que tienes tres artículos y quieres distribuirlos uniformemente en tu contenedor. Aquí es donde justify-content resulta útil.

• flex-start: Los elementos se alinean con el inicio del contenedor (predeterminado).
• centro: Los elementos están centrados.
• espacio entre: los elementos están espaciados uniformemente, con el primer elemento al principio y el último al final.
• espacio alrededor: Los elementos se espacian con el mismo relleno alrededor de cada elemento.

.flex-container {
    display: flex;
    justify-content: space-between;
}

Ahora, los elementos estarán espaciados uniformemente dentro del contenedor.

5. Alinear elementos: magia vertical

Mientras justify-content controla la alineación horizontal, align-items se encarga de la alineación vertical (o a lo largo del eje transversal). Estas son tus opciones:

• estirar: los elementos se estiran para llenar el contenedor (predeterminado).
• flex-start: Los elementos se alinean en la parte superior.
• flex-end: Los elementos se alinean con la parte inferior.
• centro: Los elementos están centrados verticalmente.

.flex-container {
    display: flex;
    align-items: center;
}

Ahora, todos los elementos estarán centrados verticalmente dentro del contenedor.

6. Flex-Grow, Flex-Shrink y Flex-Basis: ajuste fino de los elementos Flex

A veces, desea que ciertos elementos crezcan, se reduzcan o tengan un tamaño inicial fijo. Las propiedades flex-grow, flex-shrink y flex-basis te permiten controlar ese comportamiento:

• flex-grow: controla cuánto debe crecer un elemento en relación con los demás.
• flex-shrink: controla cuánto debe reducirse un elemento en relación con los demás.
• flex-basis: establece el tamaño inicial del elemento antes de que crezca o se reduzca.

Ejemplo:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Esto garantiza que el elemento comience en 100 px, pero puede crecer para llenar espacio adicional si es necesario, sin encogerse.

7. Ejemplo de Flexbox en acción

¡Juntemos todo esto con un ejemplo!

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

En este ejemplo:

• Los elementos están organizados en una fila.
• Están espaciados uniformemente con justify-content: espacio alrededor.
• Todos los elementos están centrados verticalmente en el contenedor con align-items: center.
• Cada elemento crece para llenar el espacio disponible por igual, gracias a flex-grow: 1.

8. Por qué Flexbox es genial

Flexbox elimina gran parte de la complejidad del diseño de diseño con la que solíamos luchar en CSS. ¡No más flotadores, no más preocupaciones por la limpieza y un diseño responsivo mucho más sencillo!

Conclusiones clave:

• Utilice display: flex para convertir un contenedor en un contenedor flexible.
• Utilice flex-direction para establecer la dirección del flujo (fila o columna).
• Utiliza justify-content y align-items para controlar el espaciado y la alineación.
• Perfecciona tus elementos flexibles con flex-grow, flex-shrink y flex-basis.

sígueme en LinkedIn-

Ridoy Hasán