Why does display flex allow margin:auto 0; to center the content?

Question

Can anyone explain the logic behind this code?

I want to know why making the div#a1 flex allows to center div#a2 by margin:auto 0; which doesn't work without making div#a1 flex.

#a1{
  display:flex;
  height: 100px;
  width: 100px;
  border:3px solid black;
}

#a2{
    height: 50px;
  width: 50px;
  border:3px solid red;
  margin: auto 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div id=a1>
     <div id="a2">
     </div>
  </div>
</body>
</html>

https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ — Roberto Zvjerković, Feb 26 '20 at 13:41

score -1 · Answer 1 · edited Feb 26 '20 at 13:54

-1

change the #a2 to this

#a2{
  height: 50px;
  width: 50px;
  border:3px solid red;
  margin-left: 25px;
  margin-top: 25px;
}

edited Feb 26 '20 at 13:54

Heretic Monkey

11,687
7
53
122

answered Feb 26 '20 at 13:52

AlexWallcott

10
8

Answers which explain the code given are downvoted less often than those which just show code without explanation. – Heretic Monkey Feb 26 '20 at 13:54
You didn't answer the question ;) – Mr T Feb 26 '20 at 13:55
Because you mention the margin of a2 as 0 so it will start from the left, The difference between the red and the black one is 50px diveded by 2 =25px – AlexWallcott Feb 26 '20 at 14:00
Im not a good as that in english hope that this helped you :) – AlexWallcott Feb 26 '20 at 14:01

Why does display flex allow margin:auto 0; to center the content?

1 Answers1