Question
Help With Flex
Hi Guys,
I need a little help with understanding Flex. I would like to rearange the layout of this page. Currently the header goes across the top. The next row is a nav area on the left followed by an article area and then an aside. The last row is the footer. I've figured out the order property but I cannot seem to make sense of the flex property used by naviagation and rightcolumn. I would like to move navigation making it a row under the header. The third row becomes an aside where the navigation is currently. Everything else stays where it is. Here's the HTML.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Holy Grail</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="headerwrapper">
<header id="header">Header</header>
</div>
<div id="main">
<article id="content">Content</article>
<nav id="navigation">Navigation</nav>
<aside id="rightcolumn">Right Aside</aside>
</div>
<div id="footerwrapper">
<footer id="footer">Footer</footer>
</div>
</body>
</html>
Here's the styles.css
@1552174 url("reset.css");
@import url("colors.css");
@import url("responsive.css");
body {
font: 2em Helvetica;
background: #ddd;
color: #666;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#header {
display: block;
min-height: 100px;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
#navigation {
flex: 1 6 20%;
order: 1;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
#content {
flex: 3 1 60%;
order: 2;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
#rightcolumn {
flex: 1 6 20%;
order: 3;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
#footer {
display: block;
min-height: 100px;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
and here's the responsive css.
@media all and (max-width: 640px) {
#page {
flex-direction: column;
}
#main {
flex-direction: column;
}
#header {
min-height: 50px;
max-height: 50px;
}
#navigation {
order: 0;
min-height: 50px;
max-height: 50px;
}
#content {
order: 0;
}
#rightcolumn {
order: 0;
min-height: 50px;
max-height: 50px;
}
#footer {
min-height: 50px;
max-height: 50px;
}
}Any help you can provide is appreciated Thanks.
AdChoices