justify-content not working with auto margin

Question

The following page shows two rectangles, red and blue. Display is flex. It is expected that red one was placed at the left part of the page (margin-right: auto) while blue div was centered in the remaining of the page (justify-content: center).

However, the result is that blue div appears totally at the right of the page instead of centered. I'm not understanding something of flexbox.

body {
  display: flex;
  justify-content: center;
}

#redDiv {
  width: 5em;
  height: 10em;
  background-color: red;
  margin-right: auto;
}

#blueDiv {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div id="redDiv"></div>
<div id="blueDiv"></div>

Update:

Thanks to all for the information and suggestions. Following them, the final code has been:

body {
  display: flex;
}

#redDiv {
  width: 5em;
  height: 10em;
  background-color: red;
    margin-right: auto;

}

#auxDiv {
  flex: 1 1 auto;
  
  display: flex;
  justify-content: center;
}

#blueDiv {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<!DOCTYPE html>
<html>
<body>

<div id="redDiv"></div>
<div id="auxDiv">
<div id="blueDiv"></div>
</div>

</body>
</html>

Update 2:

This solution, based on comments by Temani Afif, gives same result:

body {
  display: flex;
}

#redDiv {
  width: 5em;
  height: 10em;
  background-color: red;
}

#blueDiv {
  width: 10em;
  height: 10em;
  background-color: blue;
  margin: auto;
}

<!DOCTYPE html>
<html>
<body>

<div id="redDiv"></div>
<div id="blueDiv"></div>
</div>

</body>
</html>

somwhere in the duplicate : *Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.* — Temani Afif, Jul 07 '19 at 15:10
from the second duplicate: *Also, keep in mind, if you use both methods at the same time, margin: auto should prevail.* — Temani Afif, Jul 07 '19 at 15:17
@TemaniAfif, I know I've written about this question in other posts. Just FYI, the reason I sometimes don't close questions when I know the answer lies in another post is that often the solution is buried deep inside the duplicate answer, forcing the OP and others to go through the entire post. — Michael Benjamin, Jul 07 '19 at 15:45
I know I would hate to have to go through a canonical post, in the middle of my development process, to find the section that answers my question. So a fast and direct answer here may be more helpful. I'm not saying that you closing this post is wrong. I'm suggesting that a quick delivery of the answer may be more user-friendly. (Perhaps both our actions here work best? Maybe worth a meta discussion.) — Michael Benjamin, Jul 07 '19 at 15:45
@Michael_B: Agree with your comments, I've read some of the related questions before to post, and the remainders after, and still now I do not see a solution similar to the one I've included in the update of the question. All the ones I've read (with flex) use invisible cloned divs, ... . In fact, I'm wondering if copy the update (or something similar) to your answer could be a good idea. — pasaba por aqui, Jul 07 '19 at 15:50
As you noted, with flex, your options are limited to hacks. The cleanest and most efficient solution would be for you to use CSS Grid. See method #5 in [my answer here](https://stackoverflow.com/q/38948102/3597276). — Michael Benjamin, Jul 07 '19 at 15:55
@Michael_B in such case I always add a comment to hightlight the part of the canonical answer dealing with this because I guess the canonical answer is needed. Of course, each one has his own method. I comment then close, you add a short answer and a link to the canonical. In this question we have both actions so I guess it's even better. — Temani Afif, Jul 07 '19 at 15:55
@TemaniAfif: probably it is but, could you say me in which of the related questions/answers there are a solution as the one I've included in the update of my question? — pasaba por aqui, Jul 07 '19 at 15:57
*I'm suggesting that a quick delivery of the answer may be more user-friendly* --> it's more user friendly for the asker of the question to get a quick fix but for the site sometimes it's not good because we may end with a lot of similar questions making the search hard because each question will become very specific while the canonical one will cover more cases. This is also debatable. — Temani Afif, Jul 07 '19 at 15:58
Yes, there are multiple ways to handle this. Like I said, perhaps it's a topic worthy of discussion. I like my method because the answer is quickly accessible without forcing the visitor to leave the page @TemaniAfif — Michael Benjamin, Jul 07 '19 at 16:00
@pasabaporaqui the first question is the *canonical* question dealing with everything related to centring and reading the answer you will find all the needed information to achieve your result. You will also understand your issue. You don't need any extra div, applying margin:auto to the blue will do it: https://jsfiddle.net/zLxb43to/. You can reach this result by understanding from the duplicate how auto margin works (note that I can also add more duplicates if the one I added aren't enough) — Temani Afif, Jul 07 '19 at 16:04
@TemaniAfif, that doesn't actually solve the problem. `margin: auto` on the blue div centers it *in the available space* not in the entire row. In other words, it centers the blue div inside the area to the right of the red div, which means the div ends up center-right on the row. — Michael Benjamin, Jul 07 '19 at 16:07
@Michael_B I know, I simply replicated the code he added in the question without adding any extra div assuming this is the intented result since he said *Thanks to all for the information and suggestions. Following them, the final code has been:* — Temani Afif, Jul 07 '19 at 16:09
@TemaniAfif: in my opinion, the duplicate "Flexbox auto margins don't work with justify-content: center in IE" is not correct one. Better remove the other two. First one uses "margin:auto" only in the case of a single div, making it confusing. Second one has no examples, ... . — pasaba por aqui, Jul 07 '19 at 16:34
it's not confusing because the other duplicates (one of them is a canonical) can be helpful. Don't forget that the question is not only to give *you* answer. It's not meant to only help *you*. Anyone facing issue related to margin/justify-content (not necessarely the same as yours) can find his answer in any of the duplicates. — Temani Afif, Jul 07 '19 at 21:53

score 2 · Accepted Answer · answered Jul 07 '19 at 15:05

Once you use auto margins, the keyword alignment properties, such as justify-content, have no effect. The auto margin has used all the free space.

§ 8.1. Aligning with auto margins

If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

The layout you are trying to achieve is described here:

Center and right align flexbox elements

justify-content not working with auto margin

1 Answers1