css - bootstrap - flexbox grid
¿Diferencia entre justify-content y align-items? (1)
Esta pregunta ya tiene una respuesta aquí:
Me está costando mucho entender cuál es la diferencia.
Según mi investigación, parece que
justify-content
puede hacer ...
space-between
y
space-around
, mientras que
align-items
puede hacer ...
stretch
,
baseline
,
initial
y
inherit
.
También parece que ambas propiedades comparten,
flex-start
flex-end
y
center
.
¿Hay ventajas y desventajas de usar uno sobre el otro o es solo preferencia? Siento que son muy similares a hacer lo mismo, ¿alguien sabe la diferencia? ¡¡Gracias!!
Nota:
Los ejes
X
e
Y
/ dirección de alineación pueden cambiar dependiendo de si está utilizando
flex-direction:
fila
o
columna
1.
justify-content:
horizontal
Alineación y espaciado a lo largo del eje primario (eje X)
flex-start;
Alinear a los niños
horizontalmente a la
izquierda
flex-end;
Alinear a los niños
horizontalmente a la
derecha
center;
Alinee a los niños centrados
horizontalmente
(¡asombro!)
space-between;
Distribuya a los niños
horizontalmente de
manera uniforme en todo el ancho
space-around;
Distribuya a los niños
horizontalmente de
manera uniforme en todo el ancho (pero con espacio en los bordes
2.
align-items:
vertical
Alineación solo a lo largo del eje secundario (eje Y)
flex-start;
Alinear a los niños
verticalmente hacia
arriba
flex-end;
Alinear niños
verticalmente
abajo
center;
Alinee a los niños centrados
verticalmente
(¡asombro!)
baseline;
Niños alineados
verticalmente
para que sus líneas de base se alineen
(realmente no funciona)
stretch;
Forzar a los niños a estar a la altura del contenedor
(ideal para columnas)
Véalo en acción:
http://codepen.io/enxaneta/full/adLPwv/
En mi opinión:
Estos deberían haber sido nombrados:
flex-x:
izquierda o derecha o centro o estiramiento o espacio entre o alrededor del espacio
flex-y:
izquierda o derecha o centro o estiramiento
Pero con html, nunca puedes tener cosas buenas. Nunca.