Flex-box align navigation items to sidebar - html

Question

On a simple flex-box layout, I am trying to align nav items to the end of the first (left) side-bar. My first thought was to recreate the aside main aside layout with :before element :after so the nav items would always align to the sidebar, but I can't seem to get the :before and :after elements to match the size of each aside. Here is an example of what I am trying to do
Flex Example
And here is the current code I am using
http://codepen.io/anon/pen/GoJEbX?editors=010

Answer 1

I wouldn't be using flex-wrapping rows here. It makes sense to start with flex-direction:column to get the full 100% height and then put the middle content (main and aside elements) in their own flex-container which can then grow as much as is required.
The horizontal layout is all flexbox.
Based on the original code the aside are 1/12th wide each (flex:1) while the main is 10/12ths (flex:10).
Therefore to line up the menu with the main, the menu itself needs to be shifted over the same amount (which means it's 11/12ths [flex:11] so the pseudo-element is just flex:1.
Adjust as required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
nav {
display: flex;
}
nav:before {
content: '';
flex: 1;
background: plum;
/* for reference */
}
nav ul {
display: flex;
background: blue;
list-style-type: none;
flex: 11;
}
nav ul a {
display: block;
padding: 20px 20px 0 0;
color: white;
text-decoration: none;
}
.content {
flex: 1;
display: flex;
}
main {
background: red;
flex: 10;
}
aside {
background: green;
flex: 1;
}
footer {
background: yellow;
}
<div class="wrapper">
<header>
<nav>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
</nav>
</header>
<div class="content">
<aside>Sidebar 1</aside>
<main>Main Content Area</main>
<aside>Sidebar 2</aside>
</div>
<footer>Footer</footer>
</div>
Codepen Demo