La propiedad abreviada flex asigna un ancho igual a las columnas (.col) pero flex-grow no lo hace.

Question

MI SNAPSHOT: https://w.trhou.se/dbntdiv1i0

.col es una clase compartida entre las dos columnas .primary y .secondary.

Escribí las siguientes reglas dentro de la consulta de medios sin embargo .col no asigna ancho igual:

@media (min-width:769px) {
    .main-header, .main-nav, .row {
        display: flex;
    }
    .main-header {
        flex-direction: column;
        align-items: center;
    }
    .col {
        flex-grow: 1;
    }
}

¿Hay algo mal con este espacio de trabajo? Parece que estoy teniendo muchos problemas extraños.

Answer 1 · 2022-11-15T15:00:01Z

15 de noviembre de 2022 3:00pm

Cuando usas la abreviatura "flex" con solo un argumento, sí establece ese valor como flex-grow, pero también establece flex-basis en 0. Entonces, para obtener el mismo efecto que obtienes usando solo "flex", necesitas agregar flex-basis: 0; a tu regla CSS. De lo contrario, flex-basis permanece en el valor predeterminado de "auto".

Para más detalles, consulta la página de MDN en La propiedad abreviada CSS flex.

Bienvenido a la Comunidad de Treehouse

¿Buscas aprender algo nuevo?

Samuel Kleos

Samuel Kleos

La propiedad abreviada flex asigna un ancho igual a las columnas (.col) pero flex-grow no lo hace.

1 Respuesta

Steven Parker

Steven Parker