flex-wrap 不适用于最小宽度和最大宽度

Question

我想使用最小宽度和最大宽度创建一个带有 flex-box 和 flex-wrapper 的响应式产品卡。 但是，最小值和最大值不适用于 flex-wrap。
flex-wrapper 确实包裹了它，但宽度保持不变，它不像我想要的那样响应。 这是我写的代码：

 .product-container{ display: flex; gap: 1rem; padding: 1rem; flex-wrap: wrap; } .product-wrapper{ padding: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; width: 100%; min-width: 10rem; max-width: 15rem; } .product-wrapper a{ text-decoration: none; } .product{ width: 100%; } .product img{ width: 100%; } .price{ display: flex; gap: 1rem; }

 <div class="product-container"> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div><div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> </div>

Answer 1

移除width:100%; ：

 .product-container{ display: flex; gap: 1rem; padding: 1rem; flex-wrap: wrap; } .product-wrapper{ padding: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; min-width: 10rem; max-width: 15rem; } .product-wrapper a{ text-decoration: none; } .product{ width: 100%; } .product img{ width: 100%; } .price{ display: flex; gap: 1rem; }

 <div class="product-container"> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Nameee</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div><div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Nameeeee</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> </div>

Answer 2

 .product-container { display: flex; gap: 1rem; padding: 1rem; flex-wrap: wrap; } .product-wrapper { padding: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; min-width: 10rem; max-width: 15rem; } .product-wrapper a { text-decoration: none; } .product { width: 100%; } .product img { width: 100%; } .price { display: flex; gap: 1rem; }

 <div class="product-container"> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> <div class="product-wrapper"> <a href="#"> <div class="product"> <img src="images/product.jpg" alt=""> <h2>Product Name</h2> <div class="price"> <p>$ 22</p> <p>$ 9</p> </div> </div> </a> </div> </div>