Los atributos de estilos
justify-content
y
align-items
solo se pueden usar cuando la visualización de un elemento se establece en
flex
,
grid
o algunos otros valores.
CSS Flex property
es una propiedad ampliamente adoptada y utilizada por los desarrolladores front-end en la actualidad. Casi no puedes prescindir de él.
Su asociado es el
CSS Grid Property
que se usa más veces al lado.
Personalmente, uso
flex
hasta el punto de que si
flex
fuera humano, probablemente ya estaría maldito.
Justify-content y align-items
Este artículo está escrito con la intención de asegurar el uso efectivo de las dos propiedades en el título (particularmente en el primer intento), por lo tanto, se requiere un conocimiento previo
CSS Flex
. Lee sobre CSS Flex aquí.
justify-contentyalign-itemssolo se puede usar cuando la visualización de un elemento se establece enflex,grido algunos otros valores.
Estarías usando la pantalla de flex
Usar estas dos propiedades puede ser confuso ya que es difícil saber cuándo usar cuál uno u otra.
Como dije, requiere el valor de visualización flexible (display: flex;)
....
element {
display: flex;
}
....
Atributos de flex:
element {
display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;
align-items: flex-start|flex-end|center|stretch|baseline;
}
Cuando la visualización de un elemento se configura como flexible, la dirección predeterminada es ‘fila’. También se puede configurar para remar manualmente.
element {
display: flex;
flex-direction: row;
}
Cuando
justify-content
se usa en un flujo horizontal, alinea los elementos a lo largo de la dirección horizontal.
Flex-start: Alinea a la izquierda por defecto.
Flex-end: Alinea a la derecha de la pantalla.
Center: Contenido al centro.
Space-between: Espacia los elementos entre todo el ancho de la pantalla.
Space-around: Espacia los elementos en toda la pantalla, aplicando además un espaciado por ambos laterales de los elementos.
Cuando
align-items
se usa en un flujo horizontal, alinea los elementos a lo largo de la dirección vertical.
Flex-start: Alinea todo en una columna en la parte superior del espacio.
Flex-end: Alinea todo en una columna en la parte inferior del espacio.
Center: Alinea todo al centro de la pantalla, tanto desde arriba como desde abajo.
Baseline: Alinea todo en la parte superior de la caja, pero sin alinear los elementos.
Stretch: Alinea el contenido en columnas diferentes.
Puedes obtener más información sobre los valores de las propiedades flexibles asociadas (como
flex-start
,
flex-end
).
cuando un elemento
flex direction
se establece en
column
, el flujo cambia.
Posee otro flujo al que me referiría como el
vertical flow
Cuando
justify-content
se usa en un flujo vertical, alinea los elementos al revés, a lo largo de la dirección vertical. Por lo tanto, todos los valores establecidos para él solo funcionarán en esta dirección.
Cuando
align-items
se usa en un flujo vertical, alinea los elementos a lo largo de la dirección horizontal. Por lo tanto, todos los valores establecidos para él solo funcionarán en esta dirección.
Las dos propiedades simplemente cambiaron de trabajo cuando se cambió la dirección.
El secreto es simple.
EL
justify-content
FUNCIONA CON EL FLUJO Y
align-items
SIMPLEMENTE HACE LO CONTRARIO.
flex-direction: row`- `HORIZONTAL flow`- `HORIZONTAL direction`para `justify-content`- `VERTICAL direction`para`align-items
flex-direction: column`- `VERTICAL flow`- `VERTICAL direction`para `justify-content`- `HORIZONTAL direction`para`align-items
Si quieres centrar cualquier elemento en otro elemento. Simplemente haz esto:
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
Con esta configuración simple, todos los elementos de la clase
.parent-element
se centrarán vertical y horizontalmente.
Espera que a estas alturas puedas decidir fácilmente entre – y cómo usarlo de manera efectiva –
justify-content
&
align-items
?
Recurso útil: alineación de elementos en un contenedor flexible