我正在开发带phonegap的应用程序。我想使用flexbox在我的主应用程序区域中布置一些按钮。
有人可以解释为什么这没有在最新的chrome中包装元素吗?
HTML:
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> </div>
CSS:
.flex-container { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-direction: row; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: end; -moz-box-align: end; box-align: end; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; justify-content:space-around; height:100%; } .flex-item { margin:0 10px 25px 0; width:86px; border:1px solid #000; } .flex-item img { max-height:80px; }
它们水平放置,只有3个半盒子出现。
您有很多事情在这里不完全正确。首先,您要混合旧属性和新属性(display: -webkit-box来自2009年草案,但-webkit-flex- flow来自标准草案)。
display: -webkit-box
-webkit-flex- flow
其次,2009年Flexbox实施均不支持box-lines: multiple,这是启用包装所必需的。可悲的是,几乎所有移动设备仅支持2009年草案。当前支持现代规范的Firefox版本也不支持包装(flex- flow和flex-wrap是受支持的属性,但不支持与包装有关的值)。
box-lines: multiple
第三,您已经有了justify-content: space-around,但2009年的对应版本设置为box-pack:center。中心是所有草稿的中心。
justify-content: space-around
box-pack:center
.flex-container { display: -ms-flexbox; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: end; -webkit-align-content: flex-end; align-content: flex-end; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; height: 100%; } @supports (flex-wrap: wrap) { /* hide from incomplete Firefox versions */ .flex-container { display: flex; } }
更新 :包装现在可以从Firefox 28版本开始使用,但仅在使用现代属性(而不是诸如的旧前缀属性display: -moz-box)时有效。
display: -moz-box