Выровнять по центру и снизу

У меня есть гибкий контейнер (синий квадрат) со следующими свойствами:

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

Поэтому его дети (голубые квадраты) располагаются так, как вы видите ниже. Тем не менее, я хотел бы добавить другого дочернего элемента (зеленый квадрат) из нормального потока и расположить его относительно своего родителя. Чтобы разместить его так, как вы видите ниже, я бы идеально написал что-то вродеbottom: 20px; а такжеmargin: auto;.

Я пытался поиграть сz-index но безрезультатно. Как мне подойти к этому? Должен ли я прибегнуть к созданию другого родительского элемента?

Ответы на вопрос(3)

Ваш ответ на вопрос