Help, justify content having no effect

[Codemiester]

Hi everyone,

My link https://codepen.io/Laurie312/pen/ZEJYEyj

I’m making a super basic design for my contact section. At the moment there are no anchors and accessibility is not the issue at this point.

My issue is minor, but slightly annoying. The justify content rule is not working how I expect it to.

I have a flex container with the default direction of row. This holds what will become the links.

Within this I have 4 divs each with container settings of flex and direction column.
align-items worked as expected across the cross axis, but justify content has not worked along the main axis. I can see that there is space to take up. I’d like to put a space evenly attribute to the flex items within these divs, but I’m struggling.

I have used

justify-content
justify-items

It’s making no effect whatsoever. It looks like there is space for this rule to take effect, so I’m baffled. Anyone got any suggestions?

[Jagaya]

Open the inspect-site tools (usually F12) and inspect your items. The “space” in the box is the padding of the h3. Meaning this space is bound to the element and there is no space inbetween the elements to justify.
In order for justify to have any effect, you have to specify the width/height of the parent container.
It works inbetween the link-boxes because their parent took the width of the page. However the boxes themself went ahead and took the minimum height/width they needed to hold their content. Meaning they don’t have any space left to distribute via justify.

[Codemiester]

Thanks for this insight Jagaya. With your help I understand the factors in play here a little bit better.