Las mismas propiedades sirven para flexbox y para grid.
gap: El espacio entre filas y columnas (flex, grid y multicolumna).
justify-content: Cómo se reparten los hijos en el eje principal.
align-items: Cómo se alinean los hijos en el eje cruzado.
Las mismas propiedades sirven para flexbox y para grid. justify-* trabaja en el eje principal (en una fila, el horizontal) y align-*, en el cruzado.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El espacio entre filas y columnas (flex, grid y multicolumna). Abrevia row-gap y column-gap.
Valores: 1rem, 1rem 2rem (filas, columnas)
El espacio entre filas.
Valores: 1rem
El espacio entre columnas.
Valores: 2rem, normal
Esencial. Cómo se reparten los hijos en el eje principal: juntos al principio, al final, centrados o con espacio entre ellos.
Valores: flex-start, center, flex-end, space-between, space-around, space-evenly
Esencial. Cómo se alinean los hijos en el eje cruzado. Con justify-content: center, centra en las dos direcciones.
Valores: stretch, flex-start, center, flex-end, baseline
Cómo se reparten las líneas (en flex con wrap) o las filas (en grid) cuando sobra espacio en el eje cruzado.
Valores: stretch, center, space-between, flex-start
La alineación en el eje cruzado de un solo hijo, distinta de la de los demás.
Valores: auto, center, flex-end, stretch
En grid, cómo se alinea cada hijo dentro de su celda en horizontal.
Valores: stretch, start, center, end
En grid, la alineación horizontal de un solo hijo dentro de su celda.
Valores: auto, start, center, end, stretch
Abreviada de align-items y justify-items. En grid, place-items: center centra cada hijo en su celda.
Valores: center, start end
Abreviada de align-content y justify-content.
Valores: center, space-between center
Abreviada de align-self y justify-self para un solo hijo.
Valores: center, end start
Las mismas propiedades sirven para flexbox y para grid.
Código del tema: .cont { display: flex; gap: 1.5rem; }
Las mismas propiedades sirven para flexbox y para grid. justify-* trabaja en el eje principal (en una fila, el horizontal) y align-*, en el cruzado.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El espacio entre filas y columnas (flex, grid y multicolumna). Abrevia row-gap y column-gap.
Valores: 1rem, 1rem 2rem (filas, columnas)
El espacio entre filas.
Valores: 1rem
El espacio entre columnas.
Valores: 2rem, normal
Esencial. Cómo se reparten los hijos en el eje principal: juntos al principio, al final, centrados o con espacio entre ellos.
Valores: flex-start, center, flex-end, space-between, space-around, space-evenly
Esencial. Cómo se alinean los hijos en el eje cruzado. Con justify-content: center, centra en las dos direcciones.
Valores: stretch, flex-start, center, flex-end, baseline
Cómo se reparten las líneas (en flex con wrap) o las filas (en grid) cuando sobra espacio en el eje cruzado.
Valores: stretch, center, space-between, flex-start
La alineación en el eje cruzado de un solo hijo, distinta de la de los demás.
Valores: auto, center, flex-end, stretch
En grid, cómo se alinea cada hijo dentro de su celda en horizontal.
Valores: stretch, start, center, end
En grid, la alineación horizontal de un solo hijo dentro de su celda.
Valores: auto, start, center, end, stretch
Abreviada de align-items y justify-items. En grid, place-items: center centra cada hijo en su celda.
Valores: center, start end
Abreviada de align-content y justify-content.
Valores: center, space-between center
Abreviada de align-self y justify-self para un solo hijo.
Valores: center, end start