sass-boilerplate | Basic Sass Boilerplate | Style Language library

I have started to use BEM with a site I am styling. I am trying to understand to how to far I should be breaking down components (blocks). For example, I have a header that has a navigation bar in there. The header is classed as a block but the navigation bar in there could be a new block or part of the header block. What is best advised here?

I was hoping to find some example sites that implement this sort of thing to get a good understanding of it but up until now, I have found nothing that appears to demonstrate it.

I am also working under the assumption that the component should layout its elements, so this is great, a good candidate for flexbox. The problem I face now is laying out the component in the page. Imagine having to layout 2 components side by side, another good candidate for flexbox but knowing where to place the display: flex ? also wouldn't the component then be in charge of placing itself within the page by using flex item css i.e. flex-shrink, flex-grow, basis, order etc..

This means that the parent is dictating where to place itself on the page and it isn't 100% an independent block now as it needs a display: flex on its container.

I did find some info with regards to file structure and wondered if this was something that could help? Maybe I am not fully understanding it - could the directory Layout be used for this?