Flexbox 自动边距不适用于 justify-content: IE 中的中心

Question

我有一个 table，其中一个单元格可以包含多个图标和文本。如果存在图标，它们会出现在文本的左侧。有几种可能的对齐情况：

只有一个图标：图标应该居中
只有文本：文本应左对齐
图标和文字都存在：图标和文字都应左对齐

我认为我可以通过使用 justify-content: center; 将 table-cell 中的所有内容包裹在 table-cell 中，然后将 margin-right: auto; 应用到文字 div.

如果有文本，自动边距会将所有内容推到左边。

如果不是，justify-content 样式将使图标居中。

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

此方法在 Chrome 中有效，但在 IE 11 中未正确应用正确的自动边距。我想知道为什么，以及如何解决它。

额外信息

似乎 IE 11 首先计算自动边距，然后对齐弹性项目而不考虑这些边距，最后尽可能地应用边距。

我相信这是因为，当在 flexbox 上设置 justify-content: flex-end; 并且文本 div 具有 margin-left: auto; 时，图标在 flexbox 中右对齐，而文本被推到外面flexbox 的边界几乎是 flexbox 的整个宽度（关于自动边距应该是多少）。

Answer 1

如 flexbox specification 中所述：

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

换句话说，auto 页边距优先于 justify-content。

在您的示例中，Chrome 似乎符合规范。（还有 Firefox。）

但是 IE11 - 在父级有 justify-content 的情况下 - 会忽略 flex 项目上的 margin-right: auto。这似乎是一个错误。

删除 justify-content 后，auto 页边距有效。

一种解决方法是完全删除 justify-content 并完全依赖 auto 边距：

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

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

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

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

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

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

Answer 2

这种删除 justify-content 的解决方法对我不起作用。如果您在 IE11 中查看此示例，您将看到：Codepen example

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

Flexbox 自动边距不适用于 justify-content: IE 中的中心

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

html

css

flexbox

internet-explorer-11