Ejemplos de Alineación con Flexbox

Fila - Alineado a la izquierda ARRIBA--ROW--

Item 1
Item 2
Item 3
justify-content: flex-start; align-items: flex-start;

Fila - Alineado a la derecha ARRIBA--ROW--

Item 1
Item 2
Item 3
justify-content: flex-end; align-items: flex-start;

Fila - Centrado ARRIBA--ROW--

Item 1
Item 2
Item 3
justify-content: center; align-items: flex-start

Fila - Centrado total---ROW

Item 1
Item 2
Item 3
justify-content: center; align-items: center;

Fila - Espaciado entre ítems---ROW

Item 1
Item 2
Item 3
justify-content: space-between; align-items: center;

Columna - Alineado a la izquierda ARRIBA

Item 1
Item 2
Item 3
flex-direction: column; justify-content: flex-start; align-items: flex-end;

Columna - Alineado a la derecha

Item 1
Item 2
Item 3
flex-direction: column; justify-content: flex-start; align-items: flex-start;

Columna - Centrado total

Item 1
Item 2
Item 3
flex-direction: column; justify-content: center; align-items: center;
.icono-texto img { height: 2em; /* El doble del tamaño del texto */ } 📏 Alternativas: em escala según el tamaño del texto del contenedor. rem escala según el tamaño de fuente raíz (más constante). px da tamaño fijo, no se adapta al texto.