Chrome和Firefox在Flexbox行为上的差异

Question

The sample can be found at http://jsfiddle.net/GGYtM/ and here is inline code as requested: 该示例可以在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>

In firefox the "root" div element does not grow to fit width of the parent element but occupies the room needed to fit the content - that's perfect. 在firefox中，“ root” div元素不会增长到适合父元素的宽度，而是占用了适合内容的空间-完美。 However in Chrome and Safari the "root" div element grows to occupy the whole width of the parent container. 但是，在Chrome和Safari中，“ root” div元素会增长，以占据父容器的整个宽度。 What's the reason of this difference? 这种差异的原因是什么？ Ideally I would like to achieve FF behavior, it's perfect. 理想情况下，我想实现FF行为，这很完美。

Answer 1

You use 你用

display: flex;

However, if you want it not to grow to fit width of the parent element, but occupy the room needed to fit the content, you should use 但是，如果您不希望它增长到适合父元素的宽度，而是占用适合内容的空间，则应使用

display: inline-flex;

For older browsers, you may need 对于较旧的浏览器，您可能需要

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>

Chrome和Firefox在Flexbox行为上的差异

问题描述

1 个解决方案

解决方案1
2 2015-01-02 18:24:00

Chrome和Firefox在Flexbox行为上的差异

问题描述

1 个解决方案

解决方案1 2 2015-01-02 18:24:00

解决方案1
2 2015-01-02 18:24:00