CSS Flexbox Explanation


What does this mean and why we need it:

Screenshot 2021-01-13 172152

Also, why do we need display: flex; here?

Screenshot 2021-01-13 172304

I mean… even without display: flex;, this looks exactly the same:

Screenshot 2021-01-13 172759

Link to the challenge:

The margin determines how much free space there is outside of an element. If you want it to be the same all the way round, you can just put for example

margin: 5px 

Or if you want it to be different on different sides of the element, you can do it like this:

margin: 25px 50px 75px 100px;

This means:
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

If you want it to be 0 pixels, then you can leave out the ‘px’.

For the flexbox question I’m not sure without seeing the code.

For the .follow-button, you see a subtle difference if it’s set to flex. The height of the element within will adjust, so it matches the height of the avatar. Removing the margin would move the button over to the left. A value of 0 0 0 auto means that it should have no distance to surrounding elements top, right and bottom, and the remaining left-margin will adjust accordingly.

I agree though that I don’t really see the reason why one would set a <h3> or <h4> to “flex” when all it contains is text. Maybe it’ll make more sense if something is added in a follow-up challenge, but right now I don’t understand it.

1 Like

It’s because of a follow-up challenge.

Thank you!