Home

Sobre Flexbox

Diseño Flexible

Flexbox permite crear diseños flexibles en los que los elementos dentro de un contenedor pueden expandirse o contraerse automáticamente según el espacio disponible. Para lograrlo, se utiliza la propiedad display: flex en el contenedor principal.

Ejemplo:

.headerPrincipal .container {
    display: flex;
}

2. Alineación Vertical

Con Flexbox, también se pueden alinear los elementos verticalmente dentro de un contenedor utilizando la propiedad align-items. Esto permite centrar los elementos verticalmente.

Ejemplo:

.headerPrincipal .container {
    align-items: center;
}

3. Distribución Horizontal

Otro aspecto interesante de Flexbox es la capacidad de distribuir los elementos horizontalmente dentro de un contenedor. Esto se logra con la propiedad justify-content.

Ejemplo:

.headerPrincipal .container {
    justify-content: space-between;
}

4. Diseño Responsivo

Flexbox también es muy útil para crear diseños responsivos que se adapten a diferentes tamaños de pantalla. Se pueden utilizar consultas de medios **(@media)** para aplicar estilos específicos cuando la pantalla es más pequeña.

Ejemplo:

@media (max-width: 768px) {
    .headerPrincipal .container {
        flex-direction: column;
        align-items: initial;
        text-align: center;
    }
    /* Otros estilos responsivos */
}