flexbox和wrap属性

Question

我正在开发带phonegap的应用程序。我想使用flexbox在我的主html" target="_blank">应用程序区域中布置一些按钮。

有人可以解释为什么这没有在最新的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版本也不支持包装（flex-
flow和flex-wrap是受支持的属性，但不支持与包装有关的值）。

第三，您已经有了justify-content: space-around，但2009年的对应版本设置为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）时有效。