flexbox 和 wrap 属性

Question

我正在使用 phonegap 开发和应用程序。我想使用 flexbox 在我的主应用程序区域中布局一些按钮。

有人可以解释为什么这个http://jsfiddle.net/apYLB/ 没有在最新的 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 个半的盒子。

Answer 1

你有很多不完全正确的东西。首先，您将旧属性与新属性混合在一起（display: -webkit-box 来自 2009 年草案，而-webkit-flex-flow 来自标准草案）。

其次，2009 年的 Flexbox 实现都不支持 box-lines: multiple，这是启用包装所必需的。遗憾的是，几乎所有的移动设备都只支持 2009 草案。支持现代规范的 Firefox 版本目前也不支持 wrapping（flex-flow 和 flex-wrap 是受支持的属性，但不支持与 wrapping 有关的值）。

第三，你有 justify-content: space-around，但它在 2009 年的对应设置为 box-pack: center。中心是所有草稿的中心。

http://cssdeck.com/labs/ccamtvl5

.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 这样的旧前缀）。

Answer 2

显示：-webkit-box;

你的意思可能是-webkit-flex。