在IE中使用justify-content：center不能使用Flexbox自动页边距

问题描述

我有一个表格，其中一个单元格可以包含一些图标以及文本。如果图标存在，则显示在文本的左侧。有几种可能的对齐情况：

1. 只有图标存在：图标应居中


2. 文本应该左对齐


3. 图标和文本都存在：图标和文本应左对齐

我认为我可以通过使用
$ b justify-content 已被移除， auto 页边距一个解决方法是完全删除 justify-content ，并完全依赖自动边距：

  .icon {margin：0 auto; } 
  

  .flexbox {display：flex; flex-direction：row;边框：2px纯黑色;宽度：300px; height：17px;}。icon {height：17px;宽度：17px;背景颜色：红色;}。图标{margin：0 auto;}  

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

  .text {margin-right：auto; } 
  

  .flexbox {display：flex; flex-direction：row;边框：2px纯黑色;宽度：300px; height：17px;}。icon {height：17px;宽度：17px;我们可以使用下面的代码来实现这个功能：    code>< div class =flexbox> < div class =text> asdf< / div>< / div>  

  .text {margin-right：auto; } 
  

  .flexbox {display：flex; flex-direction：row;边框：2px纯黑色;宽度：300px; height：17px;}。icon {height：17px;宽度：17px;我们可以使用下面的代码来实现这个功能：    code>< div class =flexbox> < div class =icon>< / div> < div class =text> asdf< / div>< / div>  

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 alignment cases:

1. Only an icon is present: The icon should be centered
2. Only text is present: The text should be left aligned
3. Both icons and text are present: Both the icon and text should be left aligned

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

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

If not, the justify-content style will center the icons.

Here is a codepen 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>

This approach works in Chrome, but the right auto margin is not applied correctly in IE 11. I'm wondering why, and how I can get around it.

Extra Information

It almost seems as if IE 11 first calculates the auto margins, then aligns the flex items with no regard for those margins whatsoever, and finally applies the margins as best as it can.

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

解决方案

As stated in the flexbox specification:

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:

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

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

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

这篇关于在IE中使用justify-content：center不能使用Flexbox自动页边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！