Why isn't my justify-content property working?
css, flexbox, spacing
Solution
`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.
Problem
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> ```