Why isn't my justify-content property working?

Question

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>

Please make sure there is no clearfix or any pseudo code on the element — Mo., May 14 '17 at 17:20

score 207 · Accepted Answer · answered Jun 06 '14 at 06:29

207

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.

answered Jun 06 '14 at 06:29

dholbert

11,386
3
42
31

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 07 '14 at 05:52
If there is text inside `justify-content` is useful regardless of the limitations pointed in this answer. – Bart Calixto May 19 '16 at 05:51
1

I think that margin: auto; will automatically fill space! Taking it out fixed my issue, after reading this post! Thank you! – Nic Szerman Mar 23 '22 at 02:32
damn! this worked – Code Tree Sep 02 '23 at 14:09

technophyle · Answer 2 · 2023-06-23T19:15:48.247

66

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.

edited Jun 23 '23 at 19:15

answered Jan 15 '18 at 02:57

technophyle

7,972
6
29
50

score 17 · Answer 3 · answered May 28 '18 at 14:10

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.

score 13 · Answer 4 · edited Jul 16 '22 at 07:28

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.

edited Jul 16 '22 at 07:28

Youssouf Oumar

29,373
11
46
65

answered Aug 19 '19 at 19:24

David de Castro

151
1
5

1

thanks, `margin-right: auto;` is important if using `justify-content: space-between;` as flex grids – RaymondM Nov 21 '19 at 01:54

score 3 · Answer 5 · answered Sep 07 '21 at 13:52

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.

answered Sep 07 '21 at 13:52

Igiri David

131
4

score 2 · Answer 6 · edited Oct 02 '22 at 03:06

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;
}

edited Oct 02 '22 at 03:06

ivanatias

3,105
2
14
25

answered Sep 28 '22 at 09:34

moath

11
5

score 1 · Answer 7 · answered Aug 01 '22 at 14:43

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

answered Aug 01 '22 at 14:43

Ammar Haddadi

61
3

score 0 · Answer 8 · answered Jun 21 '23 at 18:01

0

If you set the height to a fixed value (100px or 30rem etc.) as opposed to a percentage or fill-available, that can be a fix. I don't think justify-content: space-between likes percentages (height:100%)

answered Jun 21 '23 at 18:01

gantt.art

31
5

score 0 · Answer 9 · answered Jul 11 '23 at 12:58

I had similar issues with 3 images first and last were stick to both ends and center one align as space between, so i did a trick using before and after now all the images are working as expected please check the code below for details.

HTML

<div className="flexContainer">
  <img src="image1.jpg" alt="..." />
  <img src="image2.jpg" alt="..." />
  <img src="image3.jpg" alt="..." />
</div>

My Css

.flexContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.flexContainer::before,
.flexContainer::after {
   content: "";
}

score -1 · Answer 10 · answered Nov 08 '22 at 23:50

-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;

answered Nov 08 '22 at 23:50

Ankit Sharda

9
2

score -11 · Answer 11 · edited Jul 08 '19 at 11:50

-11

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.

edited Jul 08 '19 at 11:50

Greenonline

1,330
8
23
31

answered Jul 08 '19 at 11:05

Madusara Liyanage

1

Why isn't my justify-content property working?

11 Answers11

Linked

Related