CSS Flexbox: Justify-content property not working

Hello guys. I have been working on my Survey Form project since yesterday, trying to learn how to use CSS Flexbox. It’s been hard but rewarding up until a few hours ago when I ran into this problem:

**<HTML>**
  <div id="recommendation">
    <div id="recommendation-box1">
      <p>* How likely is that you would recommend freeCodeCamp to a friend?</p>
     </div>
     <div id="recommendation-box2">
      <label for="definitely">
        <input id="definitely" type="radio" name="recommendation" value="recommendation">Definitely
      </label>
      <label for="maybe">
        <input id="maybe" type="radio" name="recommendation" value="recommendation">Maybe
      </label>
      <label for="not-sure">
        <input id="not-sure" type="radio" name="recommendation" value="recommendation">Not sure
      </label>
    </div>
  </div>
**</HTML>**

**<STYLE>**
#recommendation {
  display: flex;
  justify-content: space-between;
  margin: 3%;
  height: 80px;
  background-color: blue;
}

#recommendation-box1 {
  display: flex;
  justify-content: flex-end;
  height: 80px;
  flex-basis: 48.8%;
  align-items: center;
  background-color: green;
}

#recommendation-box2 {
  display: flex;
  height: 80px;
  flex-basis: 49%;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background-color: red
}
**</STYLE>**

The second box (“recommendation-box2”) works perfectly but the first one doesn’t justify to the end. What could be going on?

This is my full project, in case you want to have a look at it.

It is working
what seems to be going on is that the text is set to be centered


notice how “free” is all the way to the edge like you want it to be.
now look at what happens when you override the rule set up earlier

Look up how to use developer tools, it will save you hours of pounding your head against the wall

here is a short video I made for my sister it gets you started.

3 Likes

Alright, I see that I can use the text-align property to set it that way. I was so absorbed by Flexbox that I didn’t even think about that. Thanks for the help, but I still don’t understand why I can’t do the same with the justify-content property. Nor why it doesn’t work at all. In the second box, the properties align-items and justify-content are given the values “flex-start” and “center”, respectively, because the child element is set to be a column, and they both work. Nevertheless, in the first box, justify-content doesn’t do anything and align-items looks like it’s buggy: for the value “center” it’s centered, but for flex-start or flex-end, it doesn’t go all the way to the top or the bottom of the flex element, instead it just moves like 1px on the set direction.

Thanks again for your detailed and quick response, I will watch the video you linked tomorrow!

I haven’t looked over all of the code as I was focusing on that single issue.
Also I’ve only been coding for 38 days so I am far far far from being an expert. In fact I am working on the same project as you at the moment.

If you are interested in flexbox I recommend this article:

The site is a treasure box of goodies
Best of luck

1 Like

Unfortunately, I haven’t been able to find an explanation anywhere on the internet. I guess I’ll leave that text-align property there as somewhat of a placeholder until I am able to understand what’s going on.

Thank you very much for your help, I wish you good luck too.

Honestly try smaller experiments.

create sample pens where you isolate just one main container and a few divisions see how that works and build up from that.

The flex alignment is for the element box it will not alter the text alignment inside the box. The reason why you see a difference between the two boxes is the content. The paragraph is taking up all the horizontal space there is, wrapping multiple lines, whereas the labels and input are only taking up the exact amount of horizontal space they need. The labels are actually block level elements but because of flex and the column direction the boxes wont take up the full width of the container.

To see what is happening. Give the child p element a with of 80% (or temporally shorten the paragraph down to just say “How likely is”). Then remove the default margin on it as well. Give it a different background color just for visual help. Now remove the flex-basis: 48.8%; on #recommendation-box1 and try out the different flex properties.

Here is a Codepen (i may or may not have been bored when making this)

Summary
#recommendation-box1 > p {
    margin: 0;
    width: 80%;
	background: blue;
}

#recommendation-box1 {
    display: flex;
	justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    height: 80px;
    /* flex-basis: 48.8%; */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    background-color: green;
    text-align: right;
}

If you also want to see it in action with align-content you have to use flex-wrap: wrap;

flex-wrap: wrap;
align-content: flex-end; /* flex-start, flex-end, center */
2 Likes

That’s some next level answer right there. I have finally understood what happens. I have resorted to simply use the text-align property by itself, since it needs to be present either way and I don’t really need to reduce p’s width.

Thank you very much!