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个产品，在小屏幕上最少减少到2个。这就是它在Chrome上的工作方式，但在Safari上我看到所有屏幕尺寸的连续两个产品。

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

任何人都可以了解为什么在Safari中发生这种情况，以及我如何才能使每行至少两种产品发挥作用？

Answer 1

Safari在使用flex-wrap时确实存在计算min-width的问题，这需要您使用flex-basis来传达元素的宽度。（这个bug最终已经解决了Safari的下一个版本）

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

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

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

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

1 个答案: