Flexbox 自动边距不适用于 justify-content: center in IE

Posted 2023-03-05

【中文标题】Flexbox 自动边距不适用于 justify-content: center in IE

【英文标题】：Flexbox auto margins don't work with justify-content: center in IE

【发布时间】：2016-04-24 01:22:35

【问题描述】：

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

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

我认为我可以通过使用 flexbox 将表格单元格中的所有内容包装起来，使用 justify-content: center;，然后将 margin-right: auto; 应用于文本 div 来完成这个和其他更复杂的对齐方式。

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

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

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

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

额外信息

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

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

【参考方案1】：

如flexbox specification中所述：

在通过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>

仅存在文本：文本应左对齐

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

【参考方案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;