cssflexboxspacing

Why isn't my justify-content property working?


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>


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:

    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.