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).

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

Relacionado

Bootstrap 5 Iconos: Nueva versión Alpha

La nueva versión de los iconos de Bootstrap 5 agregará casi 300 iconos nuevos, haciendo que el número final resultante de iconos incluidos en la librería sobrepase los 1.000 iconos. Se añadirán nuevos iconos de calendario para utilizar a la hora de agregar eventos y rangos ¡SEGUIR LEYENDO!

Guía de Selectores CSS para principiantes

Los selectores CSS se usan para definir el diseño de los elementos mediante CSS. Existen muchos tipos diferentes de selectores de CSS cada uno con su propia sintaxis única. Los selectores se encargan de decir al navegador a qué elementos se deben aplicar los valores indicados ¡SEGUIR LEYENDO!

¿Qué diferencias hay entre Boostrap y Tailwind CSS?

En los últimos tiempos, la batalla entre los frameworks CSS es terrible, y Tailwind CSS ha ganado mucha reputación entre los desarrolladores front end, siendo un numeroso grupo, los que tras probarlo deciden seguir usándolo como framework CSS de referencia dentro de sus "stacks", pilas o ¡SEGUIR LEYENDO!

Nunca ha existido un mejor momento para crear sitios web

Este artículo es una traducción completa de There’s never been a better time to build websites del blog de SimeonGriggs Mi historia del origen del desarrollo web se remonta a hace unos 25 años. En ese entonces pasé mis semanas jugando Red Alert, hasta el fin ¡SEGUIR LEYENDO!

El camino del Frontend Developer, por MrCodeDev

En este repositorio de Github de MrCodeDev vas a encontrar una importante lista de recursos para ayudarte a emprender el camino de llegar a ser Frontend Developer. El repositorio, ha sido creado por MrCodeDev y si deseas aportar algún contenido, puedes considerar el contactar con él; ¡SEGUIR LEYENDO!

Deja un comentario