121

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>

1
  • 1
    Please make sure there is no clearfix or any pseudo code on the element
    – Mo.
    May 14, 2017 at 17:20

9 Answers 9

202

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.

3
  • 3
    Alright, thanks. I was able to find a simple fix though. I just added padding to the left side of the article container. Everything seems to work perfectly fine after that.
    – VEDA0095
    Jun 7, 2014 at 5:52
  • If there is text inside justify-content is useful regardless of the limitations pointed in this answer. May 19, 2016 at 5:51
  • I think that margin: auto; will automatically fill space! Taking it out fixed my issue, after reading this post! Thank you! Mar 23, 2022 at 2:32
63

What happened to me was I did NOT set display: flex on the container (the element with the justify-content property). Of course, justify-content won't work without that property. The items you want spaced out need to be 'flex items', or direct descendants, of an element with display: flex and justify-content: space-around.

0
16

I had a further issue that foxed me for a while when theming existing code from a CMS. I wanted to use flexbox with justify-content:space-between but the left and right elements weren't flush.

In that system the items were floated and the container had a :before and/or an :after to clear floats at beginning or end. So setting those sneaky :before and :after elements to display:none did the trick.

0
13

I was having a lot of problems with justify-content, and I figured out the problem was margin: 0 auto

The auto part overrides the justify-content so its always displayed according to the margin and not to the justify-content.

1
  • 1
    thanks, margin-right: auto; is important if using justify-content: space-between; as flex grids
    – RaymondM
    Nov 21, 2019 at 1:54
3

Sometimes justify-content just isn't the property you should use. This is especially true when your flex-direction is column which makes the main axis vertical (y). You should try the align-item property, that may be the charm.

2

There should be more space for justify-content to use.

You can use flex-basis and give a value, for example, 40 percent.

It's that simple

.content-main{
  flex-basis: 40%;
}
aside{
  flex-basis: 40px;
}
1

always make sure to specify a width and height for your container + setting padding : 0 (or auto) ; and margin : 0 (or auto) ; for the elements inside the container might help too

-1

if,

justify-content: space-between;

doesn't work properly, make sure you:

  display: flex;
  flex-direction: column;

and then try

display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
-10

Screenshot

Go to inspect element and check if .justify-content-center is listed as a class name under 'Styles' tab. If not, probably you are using bootstrap v3 in which justify-content-center is not defined.

If so, please update bootstrap, worked for me.

Not the answer you're looking for? Browse other questions tagged or ask your own question.