soy el maestro del flexbox

 empecemos la clase
para que un contenedor tenga elementos flexibles, es decir que se puedean mover hacia la derecha, izquierda arriba abajo espacios entre medio, todos los elementos en una linea horizontal, o todos en una linea vertical

primero empezamos poniendo propiedades y reglas al contenedor flexible

.contenedor-flexible{
    display: flex;
    justifiy-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

asi los elementos se alinean horizontal segun su anchura y bajan abajo si no caben en la linea y alineados verticalmente centrado

esto es lo basico

solo se los distribuje en lina o varias lineas pero no se modifica su tamaño

segundo es poner espacios entre cada elemento fijo aqui se usa la propiedad gap:20px;
pero este gap causa conflicto con la propiedad justify-content: space-between, pero uno lo puede soportar por tener espacios entre el medio fijos y bueno utulizar otra alineacion no el space-between

para hacer que los elementos se agranden achiquen se usa otro metodo, el metodo de agrandamiento/achicamiento flex grow flex-shrink flex-basis