css - 如何更改flexbox包装？

Question

我的应用程序中有一个响应式flexbox框，其中包含动态呈现的卡片(每个api调用从1-10张卡片呈现)。它几乎可以完全满足我的要求，除了包装方式。

假设我渲染了10张卡片，如果我调整了屏幕大小，因此变成了4-4-2最后2张卡居中，我希望它包起来，以便最后2张卡从左侧开始并以相同的间距像上面的卡一样。你该怎么做？

编辑以进一步阐述:假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1，卡片应居中显示，我仍然需要居中，但我希望最后2张如果卡变成4-4-2或3-3-2等，则从左侧缠绕卡。

https://codepen.io/hyrosian/pen/EXKZJz

.card {
    text-align: center;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    max-width: 300px;
    margin: 2rem;
    padding-bottom: 1rem;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}

<div class="container">
  <div class="recipe-grid">
    
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
    
    
  </div>
</div>
  

Answer 1

如果要使用Flexbox，并且没有脚本，则可以创建ghost元素，以便它们填充最后一行的空间。

因此，对于可能为4的列长，您需要3个ghost元素，依此类推。

也可以使用伪元素，这将使所需的虚影减少2。

.card {
    text-align: center;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    max-width: 300px;
    margin: 2rem;
    padding-bottom: 1rem;
}
.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}

<div class="container">
  <div class="recipe-grid">
    
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
    

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    
  </div>
</div>

更新

由于使用 justify-content: space-around，因此您也可以这样做，在 card周围添加一个额外的包装器，将其居中，然后通过媒体查询，使包装器根据每行项目的数量填充行。

注意，由于不能在媒体查询中使用 CSS calc，因此值基于 1rem等于 16px，因此第一个值的计算方式如下: 300px + (2rem * 2) = 728px，依此类推。因此，如果您的浏览器在 root元素上的默认字体大小不是 16px，则可以将其设置为该大小，或者重新计算查询值

.card {
  text-align: center;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  max-width: 300px;
  margin: 2rem;
  padding-bottom: 1rem;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.recipe-grid .card-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
@media (min-width:  728px) { .recipe-grid .card-wrapper { width: 50%;     } }
@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }
@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%;     } }
@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%;     } }

<div class="container">
  <div class="recipe-grid">
    
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
    
  </div>
</div>

最后，我还想提到这些帖子 how-to-center-a-flex-container-but-left-align-flex-items和 can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in(可以被视为与此重复)，因为它很好地解释了Flexbox在包装和居中项目方面的工作方式，以及更多其他内容。解决方案比我给的要好。