Sigo sin entender del todo como funciona justify-content y align-items…

Cristian Cordero

Cristian Cordero

Pregunta
studenthace 4 años

Sigo sin entender del todo como funciona justify-content y align-items…

6 respuestas
para escribir tu comentario
    Carlos Reyes

    Carlos Reyes

    studenthace 3 años

    Revisa la documentación y juega un poco con las dos propiedades, recuerda que la práctica hace el maestro, te comparto unos enlaces:

    Saludos.

    Marlon Javier Velasquez Peña

    Marlon Javier Velasquez Peña

    studenthace 3 años

    Hay algo muy importante de flex. Flex sólo trabaja el eje X (se genera una fila continua). Dicho esto, tienes el cross axis y el main axis.

    Una confusión muy habitual, es pensar que justify-content alínea los elementos de manera horizontal, error, justify-content trabaja sobre el main axis(eje principal) y alinea las cosas en el main axis.

    align-items, alínea los elementos en el cross axis (eje secundario).

    El eje principal, puede ser X o puede ser Y, dependerá de la dirección que estés utilizando(flex direction). Esto también afecta al eje secundario.

    En resumen, dependiendo de la dirección, X puede ser el eje principal o el cross axis (eje secundario).

    Aldo Miguel Ortiz Parodi

    Aldo Miguel Ortiz Parodi

    studenthace 3 años

    No te frustres! Yo tuve que ver no uno, sino varios cursos y videos de Youtube para terminar de entender Flex, y con Grid me tomó más tiempo aún. Paciencia, CSS es bastante complejo al inicio, pero si lo dominas es un excelente skill.

    Mario Frutuoso Bueno

    Mario Frutuoso Bueno

    studenthace 3 años

    Aquí un juego recomendado por el profesor De Granda para poder entender y practicar mejor el display:flex; y sus propiedades.

    https://flexboxfroggy.com/#es

    David Leon

    David Leon

    studenthace 3 años

    justify-content es para acomodar los hijos de un contenedor tipo flex de manera horizontal(flex-direction: row), y align-items de manera vertical(flex-direction:column)

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.

Curso Práctico de HTML y CSS
Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.