Flexbox Autofield not working with justify-content: center in IE

Question

I have a table where a cell can contain several icons, as well as text. If icons are present, they are displayed to the left of the text. There are several possible cases of alignment:

• Only the icon is present: the icon should be centered.
• Only the text is present: the text should be left aligned
• Both the icon and the text are present: the icon and the text should be aligned to the left

I thought I could accomplish this and other more complex alignments by wrapping everything in a table cell using flexbox using justify-content: center;and then applying margin-right: auto;to a text div.

If there is text, the automatic margin will push everything to the left.

If not, the style justify-contentwill center the icons.

Here is the code containing my approach.

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

<div class="flexbox">
  <div class="icon"></div>
  <div class="text">asdf</div>
</div>

Run codeHide result

This approach works in Chrome, but the correct automatic margin is not applied correctly in IE 11. I wonder why and how I can get around this.

Additional Information

It seems that IE 11 first calculates automatic fields, then aligns the elements of flexibility, ignoring these fields, and finally applies the fields as best as possible.

I believe this because when justify-content: flex-end;installed on flexbox, and the text div has margin-left: auto;, the icon is right-aligned within the flexbox, and the text is pushed out of the flexbox border over almost the entire width of the flexbox (about what the automatic border should be).

Answer 1

flexbox :

justify-content align-self auto .

, auto justify-content.

Chrome, , . (Firefox, .)

IE11 – , justify-content – margin-right: auto flex. , .

justify-content , auto.

justify-content auto:

• : .

.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;
}

<div class="flexbox">
  <div class="icon"></div>
</div>

Hide result

2. :

.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;
}

<div class="flexbox">
  <div class="text">asdf</div>
</div>

Hide result

3. : ,

.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;
}

<div class="flexbox">
  <div class="icon"></div>
  <div class="text">asdf</div>
</div>

Hide result

Answer 2

justify-content . IE11, : Codepen

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: white;
}

.item {
    margin: auto;
    width: 50px;
    height: 50px;
    background-color: red;
}