Flex wrap not working in flexbox

I am trying to do something like a float left with a block element in the center in flex box with a div #score that is one of the child elements of a flex container. I started off by using align self:center on #score and I expected the div to go to the center of the parent div, but instead it is on the side of the parent div and it also pushed the h3 element above it away from the center. I added flex wrap, but that changed nothing. I’m trying to design this to look something similar to the example project here : https://codepen.io/Em-Ant/full/QbRyqq/ .

How can I make the #score div place to the center and have it stop pushing the h3 element above it to the side? And is there a way I can do something similar to float:left in flexbox? Here is a link to my codepen : https://codepen.io/icewizard/pen/JLBpNQ

EDIT: flex-direction row and column did nothing but thats how this problem was fixed on stackoverflow answers…

Hey @aioy would you mind linking the stackoverflow post you found, I’d like to take a look at it for comparison. Thanks!

1 Like

Here’s the link to your project fixed:

The issue is that your h3 element needed to be put in a div so you could apply flex to it. Essentially inside your flexbox you had a text element and a flex element so wether you had flex row or column it wouldn’t align properly. I also centered the text in the div I put it in. Hopefully this helps!

1 Like

I was looking at a couple of stack overflow posts and I forgot which one it was, not in my browser history either sorry. I think this :https://stackoverflow.com/questions/33329225/placing-a-div-below-another-using-flexbox was one of them and a few others I can’t remember.

Thanks I ended up fixing it doing something similar to this.