JUSTIFY-CONTENT & ALIGN-ITEMS en tu primer intento

Los atributos de estilos justify-contenty 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-contenty align-itemssolo se puede usar cuando la visualización de un elemento se establece en flex, 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-contentse 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-itemsse 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).

• CSS justificar-contenido
• Elementos de alineación CSS

cuando un elemento flex directionse establece en column, el flujo cambia.

Posee otro flujo al que me referiría como elvertical flow

Cuando justify-contentse 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-itemsse 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