Всё зависит от того, будут ли во флекс-ячейках элементы (используемые только в этом контексте) или блоки (могут быть переиспользованы где-то ещё).
В первом случае всё просто, приблизительно так:
<div class="container">
<div class="container__header"> ... </div>
<div class="container__body"> ... </div>
<div class="container__footer"> ... </div>
</div
.container {
display: flex;
...
}
.container__header {
flex: 1 1 auto;
}
.container__body {
flex: 1 1 auto;
}
.container__footer {
flex: 1 1 auto;
}
Во втором случае да, будут полезны дополнительные обертки, на которые и будут повешены флекс-свойства. Причина в том, что блок не должен ничего знать о своем позиционировании на странице, он должен знать только собственное устройство. А положением управляет вышестоящий уровень. Примерно так:
<div class="container">
<div class="container__header">
<div class="some-header-block"> ... </div>
</div>
<div class="container__body">
<div class="some-body-block"> ... </div>
</div>
<div class="container__footer">
<div class="some-footer-block"> ... </div>
</div>
</div
В общем, в процессе верстки нужно задавать себе вопрос - этот блок может быть использован где-то ещё? Пусть не прямо сейчас, но хотя бы теоретически в будущем? Если да - делать обертки.
