How do I make this layout with flexbox? - css

Question

I've got a form with a couple areas to it and I've been trying to figure out how to get flexbox to lay something out like this:
If possible, how could I do this while using the least amount of parent containers? (Or, why might I not want to do that?)
Stumped enough by not having achieved this that I think asking is the right move. Still wrapping my head around it all.

Answer 1

.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
body {
padding: 2em;
}
<div class="wrapper">
<header class="header">Header</header>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
Modified from an example found here. Full credit to css-tricks.
Edit: highly recommend that css-tricks article. Very helpful resource for all things flexbox

Answer 2

you can build this layout from body with a few CSS lines:
html,
body {
height: 100%;/* or 100vw just for body */
margin:0 /* reset */
}
body,
section {
display: flex;
}
/* eventually : section {overflow:auto} if you want to keep footer down the screen no matter how much content */
body {
flex-flow: column;
}
section,
article {
flex: 1;/* use whole space avalaible if only child or share it evenly when multiple children */
}
/* add borders to see elements */
header,
footer,
article {
border: solid;
padding: 1em;
}
/* break point without mediaqueries ?
uncomment this below */
/* article {
min-width:320px;/* 2 articles make break point at average 640px */
}*/
<header>
header any height
</header>
<section>
<article>Side</article>
<article>Side</article>
</section>
<footer>
footer any height
</footer>
http://codepen.io/gc-nomade/pen/WGazGX to play with (or download code samples)