VÁRIOS termos que eu não entendi

O que significa esse "flex-wrap: wrap" e o "justify-content: space-between" ??? Pra que servem? quando posso utilizá-los?

.destaques__categorias__lista {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

Também não consegui entender esse "flex" e "flex-end"... mesmas dúvidas dos termos acima.

.caixa {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

E por último, o que é essa unidade rem? O ponto na frente do "2rem" significa 0.2rem? Qual a diferença entre "rem", "em" e "px"?

.destaques {
    display: grid;
    grid-gap: .2rem;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 50px);
}

POR FAVOR, alguém me explica porque eu não consigo ignorar esses buracos na minha cabeça...