FlexCit自动边距不适用于对齐
我有一个表格，其中一个单元格可以包含多个图标以及文本。 如果图标存在，它们显示在文本的左侧。 有几种可能的对齐情况：
我认为我可以通过使用justify-content: center;包装flexbox中的表格单元格中的所有内容来完成这个和其他更复杂的对齐操作justify-content: center; ，然后应用margin-right: auto; 到文本div。
如果有文字，自动保证金会将所有内容推到左边。
如果不是，则justify-content样式将使图标居中。
这是一个包含我的方法的codepen。
.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>正如Flexbox规范中所述：
在通过justify-content和align-self进行对齐之前，任何积极的可用空间都将分配给该维度中的auto边距。
换句话说， auto边距优先于justify-content 。
在您的示例中，Chrome看起来符合规范。 （Firefox，以及。）
但IE11 - 在父母justify-content - 忽略柔性项目上的margin-right: auto 。 这似乎是一个错误。
当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>这个解决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;
}