Mis apuntes de desarrollo web </>

Alineación de elementos

Dos dimensiones de alineación:

Al alinear elementos se hacen en dos ejes: el eje en línea (o principal) y el eje de bloque (o transversal). El eje en línea es horizontal y el eje de bloque es vertical.

Al alinear elementos en el eje en línea, se utilizan las propiedades que comienzan con justify-:

justify-items:
Define el valor predeterminado justify-self para todos los elementos dentro del contenedor, dándoles a todos una forma predeterminada de justificar cada elemento a lo largo del eje apropiado.
justify-self:
Establece la forma en que se justifica un elemento dentro de su contenedor de alineación a lo largo del eje apropiado.
justify-content:
Define cómo el navegador distribuye el espacio entre y alrededor de los elementos a lo largo del eje principal de un contenedor flexible y el eje en línea de un contenedor Grid.

Al alinear elementos en el eje del bloque, se utilizan las propiedades que comienzan align-:

align-items:
Establece el valor align-self en todos los elementos dentro del contenedor. En Flexbox, controla la alineación de los elementos en el eje transversal. En Grid, controla la alineación de elementos en el Eje de bloque dentro de su área de cuadrícula.
align-self:
Anula el valor de align-items de un Grid o un elemento flexible. En Grid, alinea el elemento dentro del área de la cuadrícula. En Flexbox, alinea el elemento en el eje transversal.
align-content:
Establece la distribución del espacio entre y alrededor de los elementos de contenido a lo largo del eje transversal de un cuadro flexible o el eje de bloque de un contenedor Grid.

Tipos de alineación:

Alineación posicional:

Especifica la posición de un elemento o elementos con relación a su contenedor. Los siguientes valores se definen para la alineación posicional y se pueden usar como valores para la alineación del contenido con justify-content y align-content, y también para la autoalineación con justify-self y align-self.

Alineación de línea de base:

Las palabras clave de alineación de la línea de base se utilizan para alinear las líneas de base de los cuadros en un grupo de temas de alineación. Se pueden usar como valores para la alineación de contenido con justify-content y align-content, y también para la autoalineación con justify-self y align-self.

Alineación distribuida:

Las palabras clave de alineación distribuida se utilizan con las propiedades align-content y justify-content. Estas palabras clave definen lo que sucede con cualquier espacio adicional después de que se hayan mostrado los temas de alineación.