[英]Difference in flexbox behavior between Chrome and Firefox
該示例可以在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行為,這很完美。
你用
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.