如何刪除 flexbox 容器右側的空白？

Question

我正在嘗試使用 flexbox 來創建產品列表頁面的響應式布局，但是此代碼在頁面右側留下了很多空白，我嘗試使用 justify-content:space-between 但效果不佳。 添加 overflow:hidden to.container class 也沒有做任何事情。

編輯：有人說他們的結果很好，但這是我的屏幕的樣子

 *{ margin:0; padding: 0; box-sizing: border-box; text-transform: capitalize; text-decoration: none; transition: all.2s linear; } body{ overflow-x: hidden; }.container{ min-height: 100vh; display:flex; flex-direction: row; justify-content:center; flex-wrap: wrap; padding: 40px 0; }.card{ height:500px; width:280px; overflow: hidden; position: relative; align-self: center; margin: 40px; }.card img{ width: 100%; height: 80%; object-fit: cover; }.card.info { text-align: center; line-height: 25px; }.card.info.stars i { color: gold; padding: 10px 0; }.card.info.price{ font-size: 20px; color:#f00333; letter-spacing: 1px; }.card.info h3{ color: #333; padding-top: 5px; }.card.discount { position: absolute; top:15px; left:15px; height:50px; width:50px; display: grid; background-color: rgba(255, 0, 0, 0.6); color:#fff; font-weight: bold; border-radius: 50%; text-align: center; line-height: 50px; }.card.panel { position: absolute; top:15px; right: -50%; width: 45px; background: rgba(255, 255, 255, 0.644); display: flex; align-items: center; flex-flow: column; }.card:hover.panel{ right: 15px; opacity: 1; }.card button { position: absolute; left:50%; bottom: 0%; height: 40px; width: 140px; border: none; outline:none; background: rgba(0,0,0,0.6); color:#fff; font-size: 15px; font-weight: 600; cursor: pointer; transform: translateX(-50%); opacity: 0; transition-delay: .2s; }.card:hover button{ opacity: 1; bottom: 25%; }.card button:hover{ background: (255,0,0,0.6); }.card.panel a{ font-size: 20px; color: #333; margin: 15px 0; }.card.panel a:hover{ color: rgba(255,0,0,0.9); }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="card"> <img src="assets/women1.jpeg" alt=""> <span class="discount">-20%</span> <div class="panel"> <a href="#" class="fa fa-heart"></a> <a href="#" class="fa fa-share"></a> <a href="#" class="fa fa-search"></a> </div> <a href="#"><button>add to cart</button></a> <div class="info"> <h3>women's clothing</h3> <div class="stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half"></i> </div> <strong class="price">$100/-</strong> </div> </div> <div class="card"> <img src="assets/women1.jpeg" alt=""> <span class="discount">-20%</span> <div class="panel"> <a href="#" class="fa fa-heart"></a> <a href="#" class="fa fa-share"></a> <a href="#" class="fa fa-search"></a> </div> <a href="#"><button>add to cart</button></a> <div class="info"> <h3>women's clothing</h3> <div class="stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half"></i> </div> <strong class="price">$100/-</strong> </div> </div> <div class="card"> <img src="assets/women1.jpeg" alt=""> <span class="discount">-20%</span> <div class="panel"> <a href="#" class="fa fa-heart"></a> <a href="#" class="fa fa-share"></a> <a href="#" class="fa fa-search"></a> </div> <a href="#"><button>add to cart</button></a> <div class="info"> <h3>women's clothing</h3> <div class="stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half"></i> </div> <strong class="price">$100/-</strong> </div> </div> </div>

Answer 1

它工作正常。 在您的瀏覽器中進行硬刷新。
我希望它能完成工作。

硬刷新： Ctrl + F5

點擊這里。 如果您想了解更多信息，請參閱有關硬刷新的一些文檔。

或者如果沒有任何效果，請使用position: absolute或Bootstrap 。