Eu tenho um contêiner flexível (o quadrado azul) com as seguintes propriedades:

display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

Portanto, seus filhos (os quadrados azuis claros) se organizam como você vê abaixo. No entanto, gostaria de adicionar outro filho (o quadrado verde) fora do fluxo normal e posicioná-lo em relação ao pai. Para posicioná-lo como você vê abaixo, eu idealmente escreveria algo comobottom: 20px; emargin: auto;.

Eu tentei brincar comz-index para nenhum proveito. Como devo abordar isso? Devo recorrer à criação de outro elemento pai?