如果要使用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 > <div > <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg"> <h3> Egg beef sandwich </h3> <p> 604 kcal - totally vegan </p> </div> <div > <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 ></div> <div ></div> </div></div>更新
由于您使用
justify-content:space-around，所以您也可以这样做，即在周围添加一个额外的包装，将其
card居中，然后通过媒体查询，使包装根据每行项目的数量填充行。
请注意，由于不能CSS calc
在媒体查询中使用，因此值基于1rem
equals 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 > <div > <div > <div > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <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>最后，我还想提到这些帖子，如何将一个flex容器居中，但如何将flex项左对齐，并且可以根据需要更改内容值的合理性元素数量输入（可能被认为是重复的），因为它很好地解释了Flexbox在包装和居中项目方面的工作方式，以及比其更多的解决方案我给了。
