Question

出于某种原因，我的Flexbox无法在Safari中使用。

在iOS上的Chrome中，它也不适用于我，但是我的Mac或Android设备上的Chrome工作正常。以下是我的代码。

div.row {
 padding: 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-justify-content: center;
 -ms-justify-content: center;
 }
div.inner {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
 text-align: center;
 padding: 0 10px;
 padding-top: 50px;
 min-width: 200px;
}

我制作了一个JSFiddle http://jsfiddle.net/mynv6k4q/来展示。

当视口变小时，底部的块应该伸展，顶部的两个块需要彼此并排，直到它们的宽度小于200px。这在Chrome中运行良好，但Safari无法正常工作，即使它有前缀。

可能有什么不对？

Answer 1

这是通过改变＆＃34; flex：1＆＃34;来解决的。 to＆＃34; flex：1 0 200px＆＃34;。显然，min-width并不能与Safari中的Flexbox结合使用。

Flexbox无法在safari中工作（带前缀）

1 个答案: