Help With Flex

Report · May 02, 2022

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

@Import 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.

Report · May 02, 2022

For the media query, change the order for the navigation item to `-1`. as in

#navigation {
    order: -1;
    min-height: 50px;
    max-height: 50px;
}

Remove the order on the other items as in:

#content {
    /* -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0; */
}

#rightcolumn {
    /* -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0; */
    min-height: 50px;
    max-height: 50px;
}

Where there is no requirement for order, as in the main CSS, do not include the order property.

For more, see

https://mastery.games/post/flexbox-order/#:~:text=How%20Flexbox%20Order%20Works%201%20Positive%20Ord...

Personally, I would start with mobile first and apply the media queries to larger screen sizes.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 02, 2022

Thanks for these insights. I've gotten the basic layout that I wanted. It was much simpler than I expected. I removed the nav code from inside the divs, placing it under my header/ Then I added another aside in place of the nav inside the divs and gave it a different ID. Then I copied the CSS for the right aside. It works but I've got downward srroll that I don't want. Still trying to figure that out. I realize that the respomsive side still needs work. I do appreciaste your suggestions and youe help. I will incorporate your suggestions into the project. From the visual perspective I like the way this page looks and I thunk it would be a good starting point for a template. I would like to keep the flex stuff to a minimum. I was never taught any of this. My knowledge of HTML is basic. I am IT trained but web development was never my stong suit. I'm better suited for programming/analysis/database, Hence my need to compartmentalize my code. That's good software design. I should probably look at the mobile aspects before going too much further so the desigm supports mobile by default. I would really like to build device defaults into the design, mobile tablet laptop desktop and wide screen. Thanks again for your suggestions.

Report · May 03, 2022

I removed the nav code from inside the divs, placing it under my header/ Then I added another aside in place of the nav inside the divs and gave it a different ID. Then I copied the CSS for the right aside.

There was no need for this if you had followed my intructions.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 03, 2022

I was experimenting on my own before I revieved your reply. I wanted to see if I could figure out a solution on my own. Sorry, no disrespect entended. I am grateful for your assistance.

Report · May 03, 2022

It works but I've got downward srroll that I don't want. Still trying to figure that out.
By @VShaneCurtis

The downward scroll is as a result of you setting a min-height of 800px on the 'main' div container.

If you want to always make the 'main' section fill up the browsers viewport vertically then use the slightly revised code below:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holy Grail</title>

<style>

* {
box-sizing: border-box;
}
body {
font: 2em Helvetica;
background: #ddd;
color: #666;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
padding: 40px;
}

#main {
flex: 1;
display: flex;
}

#header {
min-height: 100px;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}

#navigation {
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}

#content {
flex: 60%;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}

#rightcolumn {
flex: 20%;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
#leftcolumn {
flex: 20%;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}

#footer {
min-height: 100px;
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
  
  
  
  
@media screen and (max-width: 640px) {
#main {
flex-direction: column;
}

#header {
min-height: 50px;
max-height: 50px;
}

#navigation {
min-height: 50px;
max-height: 50px;
}


#rightcolumn {
min-height: 50px;
max-height: 50px;
}
#leftcolumn {
min-height: 50px;
max-height: 50px;
}

#footer {
min-height: 50px;
max-height: 50px;
}
}
  </style>
</head>
<body>

<div id="headerwrapper">
<header id="header">Header</header>
<nav id="navigation">Navigation</nav>
</div>

<div id="main">
<aside id="leftcolumn">Left Aside</aside>
<article id="content">Content</article>

<aside id="rightcolumn">Right Aside</aside>
</div>

<div id="footerwrapper">
<footer id="footer">Footer</footer>
</div>
</body>
</html>

Report · May 03, 2022

Thanks for this. Yeah that was my first thought as well but it didn't make sense because I have a very big monitor, 43 inches and 800 px doesn't cover it. I'll make these adjustments.

Report · May 03, 2022

Thanks for your assistance. Your suggested changes have been applied. Looks really nice and more polished. Thanks for the added embellishments.