How to align cascaded div containers with Flexbox - html

Question

I am trying to achieve the following layout for a navigation bar with Flexbox. I am stuck with the alignment of the divs. This is how it should like:
This is what i build up with Divs and CSS. But i dont know how to align those divs, so that i get the desired result.
Fiddle
* {
box-sizing: border-box;
}
#nav {
display: flex;
}
#logo {
width: 100px;
heigth: 100px;
background-color: black;
margin-left: 24px;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>

Answer 1

I would add a few more flex containers to some of the child divs. I'd also specify the width and flex-direction on the #left_side div and justify the content on the #top_nav div.
Try the snippet below or see this updated fiddle:
* {
box-sizing: border-box;
}
#nav,
#left_side,
#top_nav,
#bottom_nav {
display: flex;
}
#left_side {
flex-direction: column;
width: 100%;
}
#top_nav {
justify-content: space-between;
}
#logo {
width: 100px;
heigth: 100px;
background-color: black;
margin-left: 24px;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>

Answer 2

There are many good guides to flexbox available. This one is very good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Your layout can be achieved by adding the following CSS
fiddle
* {
box-sizing: border-box;
}
#nav {
display: flex;
}
#logo {
width: 100px;
height: 100px;
background-color: black;
margin-left: 24px;
}
#left_side {
display: flex;
flex-direction: column;
flex: 1;
}
#top_nav {
display: flex;
justify-content: space-between;
flex: 1;
}
#bottom_nav {
display: flex;
flex: 1;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>

Answer 3

Flexbox is one way to build the layout. You'll need extra containers to make it work.
However, if you want to keep it really simple, use CSS Grid:
header {
display: grid;
grid-template-columns: 100px 3fr 1fr;
grid-template-rows: 50px 50px;
grid-template-areas: " logo title switch "
" logo nav nav ";
}
#logo { grid-area: logo; }
#title { grid-area: title; }
#menu_switch { grid-area: switch; }
nav { grid-area: nav; display: flex; }
nav > a {
flex: 0 0 75px;
margin: 5px;
border: 2px solid green;
}
/* for demo only */
#logo { background-color: lightgray; }
#title { background-color: pink; }
#menu_switch { background-color: skyblue; }
nav { background-color: lightgreen; }
* { box-sizing: border-box; }
div, a { display: flex; align-items: center; justify-content: center;
text-align: center; }
<header>
<div id="logo">100x100px<br>Logo</div>
<div id="title">Page Title</div>
<div id="menu_switch">Switch</div>
<nav>
<a class="nav_item">Menu 1</a>
<a class="nav_item">Menu 2</a>
<a class="nav_item">Menu 3</a>
<a class="nav_item">Menu 4</a>
</nav>
</header>
jsFiddle demo
For an explanation of the grid rules above and browser support data, see these posts:
CSS-only masonry layout but with elements ordered horizontally
Browser support for CSS Grid