不能得到我的flex项目正确包装.它们没有在第一行下面正确排列

Question

如果您运行我的代码片段可以看到，第二行被放置在几乎没有位置的中间，原因我无法解释。我想让它正好在第一行的下面，有0.5rem的间隙。我想要实现这一点，同时仍然保持容器的高度至少3个项目的高度，就像我有它。请帮助

.grid_product_images {
--gpi-item-size: 6rem;
--gpi-gap: 0.5rem;
--gpi-columns: 3;
display: flex;
flex-wrap: wrap;
/* grid-template-columns: repeat(var(--gpi-columns), 1fr); */
gap: var(--gpi-gap);
max-width: calc(calc(var(--gpi-item-size) * var(--gpi-columns)) + calc(var(--gpi-gap) * calc(var(--gpi-columns) + 1)));
min-height: calc(calc(var(--gpi-item-size) * var(--gpi-columns)) + calc(var(--gpi-gap) * calc(var(--gpi-columns) + 1)));
align-items: flex-start;
padding: var(--gpi-gap);
border-radius: 0.5rem;
background-color: grey;
}
.grid_product_images > div {
width: var(--gpi-item-size);
height: var(--gpi-item-size);
border-radius: 0.5rem;
background-color: white;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
cursor: pointer;
}
.grid_product_images .btn_add_image {
width: 100%;
height: 100%;
background-color: white;
border: 0.1rem solid black;
border-radius: 0.5rem;
cursor: pointer;
}

<div class='grid_product_images'>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='add_image_container'>
<button type='button' class='btn_add_image' id='btn_add_image'>+</button>
</div>
</div>

Answer 1

尝试在flex容器中设置align-content: flex-start;。

根据MDN:

CSS align-content属性设置间距的分布以及沿着flexx的交叉轴或网格的内容项周围块轴。

Answer 2

由于min-height设置在.grid_product_images上，所以它出现的方式。您可以通过添加align-content: flex-start;

来修复此问题。

.grid_product_images {
--gpi-item-size: 6rem;
--gpi-gap: 0.5rem;
--gpi-columns: 3;
display: flex;
flex-wrap: wrap;
/* grid-template-columns: repeat(var(--gpi-columns), 1fr); */
gap: var(--gpi-gap);
max-width: calc(calc(var(--gpi-item-size) * var(--gpi-columns)) + calc(var(--gpi-gap) * calc(var(--gpi-columns) + 1)));
min-height: calc(calc(var(--gpi-item-size) * var(--gpi-columns)) + calc(var(--gpi-gap) * calc(var(--gpi-columns) + 0)));
padding: var(--gpi-gap);
border-radius: 0.5rem;
background-color: grey;
align-content: flex-start;
}
.grid_product_images>div {
width: var(--gpi-item-size);
height: var(--gpi-item-size);
border-radius: 0.5rem;
background-color: white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.grid_product_images .btn_add_image {
width: 100%;
height: 100%;
background-color: white;
border: 0.1rem solid black;
border-radius: 0.5rem;
cursor: pointer;
}

<div class='grid_product_images'>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='add_image_container'>
<button type='button' class='btn_add_image' id='btn_add_image'>+</button>
</div>
</div>