Generador de Flexbox CSS

justify-content reparte los elementos a lo largo del eje principal —la dirección en la que fluye la fila o la columna—, mientras que align-items los coloca en el otro eje. Al cambiar la dirección de fila a columna los dos ejes se intercambian, así que justify-content pasa a actuar de arriba abajo y align-items de izquierda a derecha.

Elige un elemento por su número y decide cuánto crece para ocupar el espacio libre, cuánto se encoge cuando falta sitio, su tamaño inicial (basis) y su propia alineación en el eje cruzado. El orden adelanta o retrasa un elemento en pantalla sin tocar el HTML. Solo los elementos que cambias reciben su propia regla en el CSS.

Sin ajuste de línea, todos los elementos se quedan en una sola fila y pueden comprimirse. Al activarlo, los que ya no caben pasan a la línea siguiente: ahí entra align-content, que reparte el espacio entre las líneas como conjunto. El gap fija la separación entre elementos, y entre líneas, sin usar márgenes.