Safari 包装中的 Flexbox 无法按预期工作

Question

我有一个使用 flexbox 的产品网格布局。无论屏幕多小，我都希望它至少连续显示两个产品。我有以下代码，可在 Chrome 中使用：

HTML

<div class="container">
  <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title that is longer than others</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
    <div class="product">
    <a href="javascript:void();">
    <img src="https://unsplash.it/300/300" alt="" />
    <p class="title">Product Title</p>
    </a>
    <p class="price">£100.00</p>
    <input class="small" value="Add to cart" type="submit">
  </div>
</div>

SCSS（Autoprefixer 添加的必需前缀）

body {
  padding-top: 24px;
}
.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.product {
  box-sizing: border-box;
  display: flex;
  border: 1px solid red;
  padding-left: 12px;
  padding-right: 12px;
  flex-grow: 1;
  max-width: 240px;
  flex-basis: 50%;
  flex-direction: column;
  text-align: center;
  margin-bottom: 24px;
  img {
    max-width: 100%;
  }
  .price {
    margin-top: auto;
    margin-bottom: auto;
  }
  p {
    line-height: 24px;
  }
}

上面的codepen在这里：

http://s.codepen.io/mikehdesign/debug/bgKyop/vPrKKdOWoEEr

使用此代码，我希望在大屏幕上连续看到 4 个产品，在小屏幕上至少减少到两个。这就是它在 Chrome 上的工作方式，但在 Safari 上，我在所有屏幕尺寸下连续看到两个产品。

如果我从 .product 中删除 flex-basis，那么我会在大屏幕上连续获得 4 个产品，但在小屏幕上会下降到 1 个，这不是我想要的。

谁能解释为什么在 Safari 中会发生这种情况，以及我如何才能让每行至少两个产品工作？

Answer 1

Safari 在使用 min-width 时确实存在计算 flex-wrap 的问题，这需要您使用 flex-basis 来传达元素的宽度。 （这个错误终于在下一个版本的 Safari 中得到解决）

我建议您将添加 min-width 设置为 .product，除非这不是您想要的外观。

否则您需要设置flex-basis: 25%;，然后使用媒体查询来获取flex-basis: 50%;应该只有2个产品的大小

http://codepen.io/Dreith/pen/ZLjWWe