小编典典

flexbox和wrap属性

css

我正在开发带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个半盒子出现。


阅读 755

收藏
2020-05-16

共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)时有效。

2020-05-16