justify-content & align-items
justify-content
justify-content en un contenedor con flex-direction: row, alinea los elementos hijos horizontalmente dentro del contenedor flex.
- flex-start (predeterminado): Alinea los elementos al inicio (izquierda).
- center: Centra los elementos horizontalmente.
- flex-end: Alinea los elementos al final (derecha).
- space-between: Deja el mayor espacio posible entre los elementos.
- space-around: Deja el mismo espacio alrededor de cada elemento, así que en los bordes queda la mitad que entre ellos.
- space-evenly: Deja el mismo espacio entre los elementos y su alrededor.
align-items
align-items en un contenedor con flex-direction: row, alinea los elementos hijos verticalmente. align-content hace lo mismo que align-items pero cuando hay varias filas (flex-wrap:wrap) y estas se han envuelto.
- stretch (predeterminado): Estira los elementos para que llenen el alto del contenedor.
- flex-start: Alinea todos los elementos en la parte superior.
- center: Centra los elementos verticalmente.
- flex-end: Alinea todos los elementos en la parte inferior.
- baseline: Alinea los elementos según la línea base del texto.
Ejemplo
Con este ejemplo dinámico puedes ver las distintas disposiciones de los elementos hijos al modificar las propiedades justify-content y align-items en los selectores.
ResultadoEn vivo
html
css