Chrome和Firefox之间flexbox行为的差异

Question

Chrome和Firefox之间flexbox行为的差异

8

示例可以在http://jsfiddle.net/GGYtM/找到，这里是请求的内联代码：

<html>
<style type='text/css>
.flex{
  /* old syntax */
  display: -webkit-box;
  display: -moz-box;

  /* new syntax */
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -o-flex; 
  display: -ms-flex; 
  display: flex; 
}

.flex-direction-horizontal{
  /* old syntax */
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;

  /* new syntax */
  -webkit-flex-direction:raw;
  -moz-flex-direction:raw; 
  -o-flex-direction:raw; 
  -ms-flex-direction:raw; 
  flex-direction: raw;
}
.flex-cross-align-stretch{
  /* old syntax */
  -webkit-box-align:stretch;
  -moz-box-align:stretch;

  /* new syntax */
  -webkit-align-items:stretch;
  -moz-align-items:stretch;
  -o-align-items:stretch;
  -ms-align-items:stretch;
  align-items:stretch;
}  
.container{
  border: 1px solid gray;
  padding:5px;
  background:#ecd953;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.button{
  width:70px;
  height:50px;
  /*margin:5px;*/
  background: #1b486f;
  color : white;
  position:relative;
  text-align:center;
  padding-top:5px;
}

.wrap{
  margin:5px;
}

</style>
<body>
    <div class="flex flex-direction-horizontal flex-cross-align-stretch container" id='root'>
    <div class="wrap">
        <div id="elem2" class="button">
      <span id="txt">2</span>
    </div>
     </div>
    </div>
</body>
</html>

在Firefox中，"root" div元素不会扩展以适应父元素的宽度，而是占用适合内容的空间 - 这很完美。然而，在Chrome和Safari中，"root" div元素会扩展以占用整个父容器的宽度。这种差异的原因是什么？理想情况下，我希望实现FF的行为，这是完美的。

- sovo2014

1

我发现这实际上是FF的一个bug - http://oli.jp/bugs/mozilla/flexbox-display-inline.html，而Webkit的行为是正确的。为了获得所需的结果，可以在根盒子中添加position:absolute：http://jsfiddle.net/GGYtM/3/。 - sovo2014

这里是一个综合示例，可以在FF和Webkit中获取所需的结果：http://jsfiddle.net/GGYtM/4/ - sovo2014

似乎FF（v35.0.1）已解决了第一个问题，并且现在与Chrome（40.0.2214.93m）一致。具有讽刺意味的是，合并后的样本现在在两个浏览器中都不再一致。 - Flatliner DOA

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

您使用

display: flex;

然而，如果你不想让元素的宽度随父元素自动调整，而是只占用内容所需的空间，你应该使用：

display: inline-flex;

对于老旧浏览器，您可能需要

display: -moz-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;

.flex {
  /* old syntax */
  display: -moz-box;
  display: -ms-inline-flexbox;
  /* new syntax */
  display: -webkit-inline-flex;
  display: inline-flex;
}
.container {
  border: 1px solid gray;
  padding: 5px;
  background: #ecd953;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.button {
  width: 70px;
  height: 50px;
  background: #1b486f;
  color: white;
  position: relative;
  text-align: center;
  padding-top: 5px;
}
.wrap {
  margin: 5px;
}

<div class="flex container">
  <div class="wrap">
    <div id="elem2" class="button">
      <span id="txt">2</span>
    </div>
  </div>
</div>