Menu
I have an odd issue that I'm having trouble with. I've been working on this prototype HTML5 template that uses Flexbox. Though I've been running into one slight problem.
I'm trying to a small space to the sidebar and content area of the template by applying the "justify-content" property to the parent div. Though it's not adding that space between the sidebar and content area. I'm not sure what it is that I'm doing wrong. So if any could help me that would be great.
Here's my HTML content:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="../scripts/javascript/responsive_drop_down.js"></script> <link href="../css/protoflexcss.css" rel="stylesheet" type="text/css" media="screen"/> <title>Welcome to My Domain</title> </head> <body> <header> <h1>This is a placeholder <br /> for header</h1> </header> <nav class="main"> <div class="mobilmenu"></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Video</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Other Work</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> <div id="wrapper"> <article class="content-main"> <section> <h2>Heading goes here...</h2> <time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time> <p>Content will go here...</p> </section> </article> <aside> <p>More content soon...</p> </aside> </div> <footer> <div class="copyright"> <span>All rights reserved 2014.</span> </div> <nav class="foot"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Video</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Other Work</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </footer> </body> </html> Here's the relevant CSS:
#wrapper { display: flex; flex-direction: row; justify-content: space-around; flex-flow: row wrap; flex: 1 100%; width:92.5%; align-self: center; padding-top: 3.5em; padding-bottom: 2.5em; margin: 0; } #wrapper article.content-main { flex: 6; order: 2; } #wrapper article.content-main section { background-color: rgba(149, 21, 130, 0.61); border: 2px solid #c31cd9; padding: 0.9em; } #wrapper aside { flex: 1; padding: 0.4em; background-color: rgba(17, 208, 208, 0.56); border: 2px solid #15d0c3; position: sticky; } NOTE: If anyone needs any other piece of my CSS code relating to any of other elements of my html please let me know, and I will happily add it into the question as well.
519
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. In most/many cases, there won't be any free space left, and indeed justify-content will do nothing.
You could use margin-left: auto on right element instead. Also when you use display: flex on parent element display: inline-block on child elements is not going to work. To add to this answer, justify-self is simply not supported in flexbox because it justifies all its items as a group.
You may use margin instead align-items and/or justify-content .
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. In most/many cases, there won't be any free space left, and indeed justify-content will do nothing.
Some examples where it would have an effect:
if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container.
if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.
In both of those cases, justify-content would be in charge of distributing the excess space.
In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-content to do anything with.
165
This answer might be stupid, but I spent quite some time to figure it out.
What happened to me was I didn't set display: flex to the container. And of course, justify-content won't work without a container with that property.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
