CSS CSS Flexbox Layout Flexbox Properties Distributing Space Inside a Flex Container

Nour El-din El-helw
Nour El-din El-helw
8,229 Points

The Property margin's Value "auto"

I still don't get what actually happened. I calculated the space left in the container after subtracting the items' widths and the container's padding, it turned out to be more than the margin-right (which is set to auto) of item-1 so does that mean that it doesn't actually take all space left? if so then what does it actually do ? or is there sth wrong in my calculations.. Thx in advance. Here is a snapshot of my workspace : https://w.trhou.se/otah7v70p1 .

Nour El-din El-helw
Nour El-din El-helw
8,229 Points

Sorry if i annoyed you with all of my non-sense. Thanks a lot!

1 Answer

Antti Lylander
Antti Lylander
9,660 Points

Hi, did you take item2's left margin (5px) into account? All of your items have margins.

If you are using chrome, use ctrl+shift+i to inspect the elements. Everything seems normal to me.

Nour El-din El-helw
Nour El-din El-helw
8,229 Points

i did inspect the elements. Also, what doesitem2's left margin have to do with that?

Antti Lylander
Antti Lylander
9,660 Points

There is something wrong with your calculations. The item1's right margin takes up all the space left. Maybe your window size changed after your calculations or something.

Nour El-din El-helw
Nour El-din El-helw
8,229 Points

Sorry that i didn't clarify. Everything works fine don't worry. The thing is what does margin-right: auto; do exactly i looked it up but can't find an answer that i get so if u can please explain it.

Antti Lylander
Antti Lylander
9,660 Points

Margin auto does just what you expected. It fills all the available space inside the container.