Как избавится от схлопывания margin при использовании flexbox?

Question

[Иван Клименко]

Верстаю небольшую страницу и возникла проблема, которую никак не могу обойти. В примерах из статей или вопросах на SO всё очень похоже, но не то.

Вот образец кода, из которого сразу ясно, в чём моя проблема. При flex-direction: column; исчезает зазор справа между родительским и дочерним элементами. А хочется, чтобы отступ оставался, как в первом варианте использования.

Как наиболее просто можно добиться желаемого поведения?

Comments

[Rustam Bainazarov]

https://codepen.io/anon/pen/WPxKeo

[Иван Клименко]

SmthTo, спасибо, это то, что нужно!

Answer 1

[Сослан Хлоев]

Добавить в класс child свойство align-self со значением center.

.child {
  ...
  align-self: center;
}

Answer 2

[FeST1VaL]

Ну если я вас правильно понял, то можно вот так.

https://codepen.io/anon/pen/QYKMLm

UPD: Ах блин не заметил что в комментах ответили...

Comments

[Иван Клименко]

У вас внизу получается отступ больше, чем остальные

[FeST1VaL]

Иван Клименко, ну тут уже просто не доглядел. не такая уж и проблема))