在IE中使用justify-content：center不能使用Flexbox自动页边距 [英] Flexbox auto margins don't work with justify-content: center in IE

问题描述

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

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


2. 文本应该左对齐


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

我认为我可以通过使用 justify-content：center将所有内容包含在表格单元格中来完成这个和其他更复杂的对齐操作; ，然后将 margin-right：auto; 添加到文本div中。

如果有文本，则自动保证金会将所有内容都推送到左边。

如果不是， justify-content style将图标居中。

此处是一个包含我的方法的codepen 。
$ b

.flexbox {display： flex-direction：row; justify-content：center;边框：2px纯黑色;宽度：300px; height：17px;}。icon {height：17px;宽度：17px;我们可以使用下面的代码来实现这个功能： code>< 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中所述规范：
$ b

在通过 justify-content 和 align-self ，任何积极的可用空间都会分配给 auto 该维度的边距。

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

$ c>。在您的示例中，Chrome似乎符合规范。 （Firefox也是如此。）

但IE11–如果父母有 justify-content –在flex项目上忽略 margin-right：auto 。这似乎是一个错误。
$ b justify-content 已被移除， auto 页边距一个解决方法是完全删除 justify-content ，并完全依赖自动边距：

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

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

2. 只显示文本：文本应该左对齐

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

3. 图标和文字均存在：图标和文字应左对齐

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

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

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:

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

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

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

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