css - 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;
  }
}

更新：从 28 版开始，包装现在可以在 Firefox 中使用，但仅在使用现代属性（而不是旧的前缀属性，如display: -moz-box）时。

Answer 2

显示：-webkit-box；

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