Flex包装不使用最小宽度和最大宽度

发布于 2025-02-11 17:43:50 字数 2444 浏览 1 评论 0原文

我想使用最小宽度和最大宽度创建一个带有Flex-Box和Flex-wrapper的响应式产品卡。但是，Min和Max不使用Flex-inap。
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>

原文

I want to create a responsive product card with flex-box and flex-wrapper using min-width and max-width. However, the min and max isn't working with flex-wrap.
The flex-wrapper does wrap it but the width remains fix and it's not responsive like how I want it to be.
Here's the code I've written:

     .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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界和平 2025-02-18 17:43:50

删除宽度：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>

Remove the 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>

回复收藏 0 原文

￠蛋碎的人ぎ生 2025-02-18 17:43:50

.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>

.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>

回复收藏 0 原文

~没有更多了~