Flexbox problem!

[CapHenry]

Problems: I can’t get my infomation list go up when full page but it kept going down the the text below the picture! Please help, thanks!
Here’s my codepen: https://codepen.io/CaptainHenry/pen/vYxoYvb

[staranbeer]

Hello! This is happening because you have a margin top of auto in the element with the class of “locator” which is causing your list to get pushed all the way to the bottom of the containing element.

remove the margin-top and try using

margin-right: 10px;

if you’re attempting to align the list to the center of the containing element i would recommend you to use flexbox with an align-items property set to center;

Hope this helped!

[CapHenry]

@staranbeer

margin to

Thanks ! But if you dont mind can you tell me how the auto property work? I remember it flexible, and in grid tag I saw it works at a width limit? I will be wrong from here. Hopefully you could help me in this! Thanks again!
(Sorry if my grammar is wrong)
And your code working was magnificent!

[staranbeer]

haha it’s alright. Assume you have a container with three elements in it just like this:

You set the container’s display property to flex, then all the elements within it will change into flex items and look like this.

now if i set margin-left of auto to the footer element, watch what happens.

the footer element is pushed all the way to the end of the container. This is happening because the footer element is taking all of the available horizontal space that the container has and setting that to the margin-left property.

This trick is used really often by programmers to simulate a lack of justify-self property in flexbox.

the same thing was happening in your case but in the vertical axis.

[CapHenry]

Woah thanks!!! I really appreciate