Answer the question
In order to leave comments, you need to log in
What is the best way to use BEM in flex layout?
I decided to try to make a page using flex, what is the best way to use the BEM methodology here? Do additional containers/wrappers (xs how to name them) with flex properties or extend existing classes like .b-block .b-block_flex?
Answer the question
In order to leave comments, you need to log in
It all depends on whether the flex cells will have elements (used only in this context) or blocks (can be reused somewhere else).
In the first case, everything is simple, something like this:
<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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question