如何更改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>    

Answer 1

如下更改CSS：

.recipe-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start

}

如果需要，可以向卡中添加保证金。