嵌套的flexbox在Safari桌面中无法正常工作

时间:2016-01-19 11:17:36

标签: css css3 flexbox

这是我所期望的(在Chrome和Firefox中测试):

enter image description here 这就是它在Safari Version 9.0.2(11601.3.9)中的外观。

enter image description here

快速向您展示一个例子:

https://jsfiddle.net/qbozL26m/1/

CSS:

.container {
  padding-top: 20px;
}

.equal-height {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
  display: flex;
  //align-items: center;
  //
  .well {
    width: 100%;
  }
}

修改:

Gif och Chrome-behavior(正确) enter image description here

Safari行为的Gif(不正确)

enter image description here

编辑2:

我已经想出了一个解决方案来解决它的问题,但它并不是那么好,因为它会覆盖bootstraps列的大小。

.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
    display: flex;
    flex-basis: 33%;
}

0 个答案:

没有答案