Flexbox auto margins don't work with justify-content: center in IE

Question

I have a table where a cell can contain a number of icons, as well as text. If icons are present, they appear to the left of the text. There are a couple of possible alignme

Answer 1

As stated in the flexbox specification:

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

In other words, auto margins have precedence over justify-content.

In your example, Chrome appears to be in compliance with the spec. (Firefox, as well.)

But IE11 – in cases where the parent has justify-content – is ignoring margin-right: auto on the flex item. This appears to be a bug.

When justify-content is removed, auto margins work.

One workaround would be to remove justify-content entirely and rely solely on auto margins:

1. Only an icon is present: The icon should be centered

.icon { margin: 0 auto; }

.flexbox {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.icon {
  margin: 0 auto;
}

2. Only text is present: The text should be aligned left

.text { margin-right: auto; }

.flexbox {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.text {
  margin-right: auto;
}

  
asdf

3. Both icons and text are present: Both the icon and text should be aligned left

.text { margin-right: auto; }

.flexbox {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.text {
  margin-right: auto;
}

  

  
asdf