我正在使用新display: -webkit-flex;
语法来定义“flexbox”,但我无法-webkit-box-flex: 1;
正常工作,因此元素占用了剩余空间。
当我使用display: box;
旧语法时,它可以正常工作(http://flexiejs.com/playground/上的示例)。我可以使用建议,chrome 支持新标准(http://flexiejs.com/playground/)。
在 Firefox 中它工作正常(现在无法在 IE 中测试它)
这是我的示例代码(小提琴):
<html>
<head>
<title>Test</title>
<script src="modernizr.min.js"></script>
<style>
.wrapper {
/* old syntax */
display: -webkit-box;
display: -moz-box;
/* new syntax */
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
border: 1px solid;
}
html, body, .wrapper {
width: 100%;
margin: 0;
padding: 0;
}
.element {
border: 1px solid black;
margin: 10px;
padding: 10px;
min-width: 300px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.no-flexbox .wrapper .element {
float: left;
width: 300px;
}
.no-flexbox .wrapper .clear {
clear: both;
}
.flexbox .wrapper .clear {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="element">
<h1>hello world</h1>
<p>
Lorem ipsum<br />
Lorem ipsum
</p>
<p>Lorem ipsum</p>
</div>
<div class="element">
<h1>hello world</h1>
<p>
Lorem ipsum
</p>
<p>Lorem ipsum</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>