Hola, ¿cuál es la diferencia entre align-items y align-content?, si bien visualmente sus efectos son diferentes, no logro definir mentalm...

Nelson Neyen Marquez Romero

Nelson Neyen Marquez Romero

Pregunta
studenthace 4 años

Hola, ¿cuál es la diferencia entre align-items y align-content?, si bien visualmente sus efectos son diferentes, no logro definir mentalmente la diferencia entre ambos.

1 respuestas
para escribir tu comentario
    Daniel Adolfo Ordoñez Rubio

    Daniel Adolfo Ordoñez Rubio

    studenthace 4 años

    Hola, Nelson :) Es una muy buena pregunta, y comprenderlo te permitirá sacar el mayor provecho de flexbox. La diferencia es el eje en que alinean. Por defecto, un contenedor

    display: flex
    ordena a sus hijos como si fuera una fila,
    align-content
    va a alinear en el eje horizontal, y
    align-items
    en el eje vertical; a estos se les llama "cross-axis" y "main-axis". Si colocas
    flex-direction: column
    ; se invierten los ejes,
    align-content
    va a alinear verticalmente, y
    align-items
    de manera horizontal, esto porque los ejes se invierte.

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.