flexbox和wrap属性

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在开发带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来自标准草案）。

其次，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）时有效。

以上是 flexbox和wrap属性 的全部内容， 来源链接： utcz.com/qa/426530.html

回到顶部