sov*_*014 8 html firefox google-chrome css3 flexbox
该示例可以在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>| 归档时间： |
|
| 查看次数： |
6949 次 |
| 最近记录： |