I'm trying to add some space between the sidebar and content area of the template by applying the "justify-content" property to the parent div, but it's not adding that space between the sidebar and content area. I'm not sure what it is that I'm doing wrong.
#wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: row wrap;
flex: 1 100%;
width:92.5%;
align-self: center;
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;
}
<body>
<header>
<h1>This is a placeholder <br />
for header</h1>
</header>
<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>
</body>
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.