Как на флексбокс выбить блок из потока?

Question

[Johny Smith]

Как третий блок выбить к нижней рамке, и чтобы четвертый прижимался автоматически к второму (когда третий выбывает)?
https://codepen.io/anon/pen/JZwVdw

Answer 1

[Pavlo Marchenko]

https://codepen.io/notfair/pen/YvBKZV?editors=1100

так?

Answer 2

[profesor08]

https://developer.mozilla.org/ru/docs/Web/CSS/alig...
https://developer.mozilla.org/ru/docs/Web/CSS/marg...

3 {
  align-self: flex-end;
}

4 {
  margin-left: auto;
}

Comments

[Johny Smith]

4 уходит вправо-вверх: https://codepen.io/anon/pen/JZwVdw

[profesor08]

Тогда либо играйся через position: absolute, но тогда зачем тебе тогда флексбокс, либо раздели на две строки, и позиционируй там свой блок как хочешь.

[Сергей delphinpro]

flex всё-таки предназначен для управления потоком элементов.
Для управления раскладкой удобнее использовать grid (если конечно возможно забить на поддержку, хотя она и достаточно высокая)

[Johny Smith]

Сергей delphinpro, -webkit-order: 4;