Why isn't my justify-content property working?

D

12

138

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>

Dump answered 5/6, 2014 at 5:52 Comment(2)

Please make sure there is no clearfix or any pseudo code on the element – Toxemia 14/5, 2017 at 17:20

I had this. Turns out there is a conflict with bootstrap 3 grid utility functions. In particular:

container:before, .container:after, .container-fluid:before, .container-sm:before, .container-md:before, .container-lg:before, .container-xl:before, .container-xxl:before, .container-fluid:after, .container-sm:after, .container-md:after, .container-lg:after, .container-xl:after, .container-xxl:after, .row:before, .row:after { content: " "; display: table; }

– Shoshone 30/11, 2023 at 15:8

E

217

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.

Exerciser answered 6/6, 2014 at 6:29 Comment(4)

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. – Dump 7/6, 2014 at 5:52

If there is text inside justify-content is useful regardless of the limitations pointed in this answer. – Commingle 19/5, 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! – Melanson 23/3, 2022 at 2:32

damn! this worked – Radiogram 2/9, 2023 at 14:9

I

70

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.

Inheritrix answered 15/1, 2018 at 2:57 Comment(0)

E

17

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.

Externality answered 28/5, 2018 at 14:10 Comment(0)

G

14

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.

Goins answered 19/8, 2019 at 19:24 Comment(1)

thanks, margin-right: auto; is important if using justify-content: space-between; as flex grids – Era 21/11, 2019 at 1:54

H

4

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.

Hamelin answered 7/9, 2021 at 13:52 Comment(0)

E

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

Economically answered 5/6, 2014 at 5:52 Comment(0)

H

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

Hysteroid answered 1/8, 2022 at 14:43 Comment(0)

H

0

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;

Hamblin answered 8/11, 2022 at 23:50 Comment(0)

N

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%)

Nidifugous answered 21/6, 2023 at 18:1 Comment(0)

O

0

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

Onehorse answered 11/7, 2023 at 12:58 Comment(0)

I

0

If you find that there is clearly spacing but the elements will not bother move with justify-content: space-around, add width: 100% since the div/container can be limited to the width of each element, rather than its' full width.

Intumescence answered 14/2 at 5:31 Comment(0)

J

-12

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.

Jackhammer answered 8/7, 2019 at 11:5 Comment(0)

Recommended topics

Hot tags