如何更改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 {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; justify-content: flex-start}如果需要，可以向卡中添加保证金。