Без привязки к макету у вас там просто блоки по сути.
Но, допустим вот такая структура:
<div class="wrapper">
<div class="header"> <!-- блок header -->
<div class="header__content"> <!-- элемент блока header -->
<div class="container"></div>
</div>
</div>
<div class="main">
<div class="container"></div>
</div>
<div class="footer">
<div class="container">
<div class="footer__logo"></div>
<div class="footer__main"></div>
<div class="footer__links"></div>
</div>
</div>
</div>
wrapper - самостоятельный блок, может иметь такие стили:
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
В свою очередь, может понадобиться растянуть средний блок на всю доступную высоту, тогда он будет элементом блока wrapper
<div class="wrapper">
<div class="header"> ... </div>
<div class="wrapper__main main"> <-- Блок main и одновременно элемент враппера -->
<div class="container"></div>
</div>
<div class="footer"> ... </div>
</div>
.wrapper__main {
flex-grow: 1;
}
Дальше блок footer - тоже вполне себе самостоятельный.
Он в свою очередь может иметь внутренние элементы
<div class="footer">
<div class="container">
<div class="footer__logo"></div>
<div class="footer__main"></div>
<div class="footer__links"></div>
</div>
</div>
Обратите внимание, что "в середине" блока вклинился другой блок - container. Это вполне допустимо! Вложенность БЭМ не обязательно должна соответствовать вложенности DOM.
Если вам здесь нужно для container добавить какие-то другие стили в контектсе footer, то делаете его элементом footer. Например, нужно выстроить элементы подвала в ряд:
<div class="footer">
<div class="footer__container container">
<div class="footer__logo"></div>
<div class="footer__main"></div>
<div class="footer__links"></div>
</div>
</div>
// общие стили контейнера (например центрирование)
.container {
max-width: 1000px;
margin-inline: auto;
}
// стили контейнера в подвале
.footer__container {
display: flex;
justify-content: space-between;
}
И последнее: не нужно связывать flexbox и БЭМ =). Первое - это технология раскладки элементов, второе - это система именования css классов для имитации модульности, избежания конфликтов и упрощения поддержки.