Question

在附带的Codepen中，您将看到我使用Flexbox来对齐标题中的徽标和菜单图标。徽标应左对齐，菜单图标右侧。（我有其他元素，但这只是演示的简化版本。）

在IE11中进行测试时，我发现Flexbox无法正常工作。据我所知，IE11应该支持这个。我有其他Flexbox元素，这些元素也无效。

如您所见，为IE10添加了前缀。

有人能告诉我这里哪里出错吗？

这是CSS：

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}           

.nav-logo {
    margin-right: auto; 
}

Answer 1

由于IE11非常错误，所以如果删除justify-content: flex-end;，它将按预期工作

Updated codepen

＆＃13;

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-logo {
  margin-right: auto;
  width: 100px;
  height: 50px;
  background: #000;
}

＆＃13;

<html>

<head></head>

<body>

  <header>

    <div class="container">

      <a class="nav-logo" href=""></a>

      <a class="nav-toggle" href="#">Menu</a>

    </div>

  </header>

</body>

</html>

＆＃13;

旁注：

基于上面的从左到右的流程（省略justify-content默认为flex-start），我会在margin-left: auto使用nav-toggle代替sample codepen }

Answer 2

设置justify-content: space-between似乎有效;为什么不用那个？

Answer 3

很抱歉，如果您查看https://caniuse.com/#search=justify-content，很明显IE不支持此方法。要解决IE上的问题，您可以像这样使用额外的CSS：

.container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  position: relative;
    @supports(justify-content: space-between) {
      -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
    }
}		    

.nav-logo {
	margin-right: auto;
  width: 100px;
  height: 50px;
  background: #000;
}

.nav-toggle {
  position: absolute;
  right: 0;
  top: 0;
  @supports(justify-content: space-between) {
    position: unset;
  }
}

<html>
	
	<head></head>
	
	<body>
		
		<header>
	
			<div class="container">
					
				<a class="nav-logo" href=""></a>
	
				<a class="nav-toggle" href="#">Menu</a>
				
			</div>
					
		</header>
			
	</body>
	
</html>

IE11中的Flexbox对齐

3 个答案: