html - 为什么我的 flex 列中的最后一个元素没有对齐？

Question

这是它的样子：https ://gyazo.com/77de215669cf2d9cd3ca35a0e064c7bf

我不确定为什么最后一个盒子不在中心。这是我的 CSS 代码：

 .recipe1{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap; 
}

.recipe2{
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgb(71,71,71);
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: white;
    align-items: center;
    min-width: 50%;
}

HTML：

<div className="recipe1">
        <div className="recipe2">
            <h1 className="display-4 p-3">{title}</h1>
            <ul> {/*Ingredients is an array of objects, so need to iterate through it with map to display*/}
                {ingredients.map(ingredient => (
                    <li className="lead">{ingredient.text}</li>
                ))}
            </ul>
            <p>Calories: {Math.floor(calories)}g</p>
            <img className={style.image} src={image} alt="Cannot display :("></img>
        </div>
    </div>

我正在使用 react 和 bootstrap，所以那里还有其他一些看起来不同的东西。

标签： htmlcssreactjsflexbox